Javascript LocalStorage是否以任何方式支持自定义（即非基本类型）对象存储和检索？

因此，我想将JavaScript文件Hello.js中的对象“Hello”传递给另一个JavaScript文件chat.js

Hello包含Strophe.Connections等成员

我读到我可以使用LocalStorage，即LocalStorage.SetItem（“Hello”，Hello），然后使用LocalStorage.getItem（“Hello”）检索对象

这对我不起作用，所以我搜索了更多的内容，找到了JSON stringify，例如，和的某人建议使用stringify

我也试过了，下面是Hello.js的相关代码：

var Hello = {
connection: null,
start_time: null,
log: function (msg) {
    $('#log').append("<p>" + msg + "</p>");
},

send_ping: function (to) {
    var ping = $iq({
        to: to,
        type: "get",
        id: "ping1"}).c("ping", {xmlns: "urn:xmpp:ping"});

    Hello.log("Sending ping to " + to + ".");
    console.log("Sending ping to " + to + ".");

    Hello.start_time = (new Date()).getTime();
    Hello.connection.send(ping);
},

handle_pong: function (iq) {
    var elapsed = (new Date()).getTime() - Hello.start_time;
    Hello.log("Received pong from server in " + elapsed + "ms.");
    console.log('Received pong from server in " + elapsed + "ms.');     
    localStorage.setItem("hello", JSON.stringify(Hello));
    return false;
    }
};

联机Hello=JSON.parse（localStorage.getItem（“Hello”）；我尝试还原对象

我现在打两行，Hello.connection.send。但是，这里很明显，我无法正确地传递和恢复Hello对象。例如，在Google Chrome JavaScript调试器中，我在那一行得到一个错误，指出

“Uncaught TypeError:undefined不是一个函数”

，这基本上意味着Chrome JS引擎无法在Hello对象中找到任何连接.send成员

这就留下了两种选择。或者，我试图做的事情（传递一个不是原始数据类型的对象）在我做的方式中是不可能的。或者，在我做这件事的方式上是有可能的，但我没有看到其他一些错误/问题

如果可能，我做错了什么

如果不可能以这种方式传递非基本数据类型，我还能怎么做

希望我说得够清楚明白

谢谢，比尔

---

Chris

一种解决方法是

toString

函数，然后将其存储在localStorage中。然后，当您从localStorage检索对象时，

eval

。下面是一个演示的快速演示（它非常愚蠢，可以根据您的需要进行优化/增强…）：

在小提琴中，我有：

// Packed Item
localStorage.setItem('test', pack(Hello));

// Unpack
testObj = unpack(localStorage.getItem('test'));
testObj.handle_pong();

---

希望这有帮助

好主意，但“eval（'temp='+obj[key]）；”似乎会导致代码注入。我真的不认为通过类定义是个好主意。在我看来，应该只传递简单的数据。我肯定听到了，@wander。不过，我确实认为这要视情况而定。过去，我很少考虑使用<代码> EVA/COD>（除了评估AJAX响应）——但是我读了几个例子，其中Bing和谷歌使用LoalSturn（W/EVAL）从JavaScript到CSS，甚至HTML（和图像）缓存所有的东西。真的很酷的东西，否则没有评估是不可能的。虽然确实存在代码注入的机会，但我认为更重要的是，在eval方面保持明智（或者更重要的是，不要误用eval）。然而，这也是我的观点：）嘿@user2606742，

eval

调用不应该引起闪烁。代码注入通常是指第三方（通常是恶意成员）向您的页面添加（或注入）脚本。例如，假设你的聊天室“打包”了所有的信息（我知道，这是一个疯狂的想法…），而你聊天室的恶意用户意识到了这一点。他们可以发送这样的消息：“（function（）{alert（'Hello guys，见到你真高兴！”）；location.href='//mysite.com'}（））”，当该消息（其他正常消息）被评估时，用户会看到警报，然后是重定向。至于它为什么不起作用——我应该提到的一点是，

pack

真的非常愚蠢。它假设一个平面对象，因此类似于

Hello.connection=function（）{}

的东西可以工作，但是

Hello.connection.send=function（）{}

不会工作（因为

send

的嵌套性质……所以它永远不会是

toString（）

ed），您需要更新

pack

方法，并添加一些递归来打包子属性。希望有帮助！如果你在这方面有困难，我很乐意提供帮助。小杰克·帕蒂沙尔（Jack Pattishall Jr.）真的很好：）在你的html代码中，你可以做到这一点（顺序很重要）。然后在chat.js中，您可以直接使用Hello.js中定义的全局对象“Hello”

function pack(obj){
    var packedObj = {};
    for (key in obj) {

        // If obj property is a function, toString() it.
        if (obj[key] && obj[key].constructor === Function) {
            packedObj[key] = obj[key].toString();
        } else {
            packedObj[key] = obj[key];
        }
    }

    return JSON.stringify(packedObj);
}

function unpack(obj) {
    // Temporary variable to hold eval'd func, if needed
    var temp;

    // Parse obj to loop
    obj = JSON.parse(obj);

    for (key in obj) {
        if (typeof obj[key] === "string") {
            eval('temp =' + obj[key]);

            // Assign eval'd function
            obj[key] = temp;
        } else {
            obj[key] = obj[key];
        }
    }
    return obj;
}

// Packed Item
localStorage.setItem('test', pack(Hello));

// Unpack
testObj = unpack(localStorage.getItem('test'));
testObj.handle_pong();