javascript - LocalStorage 是否以任何方式支持自定义(即非原始类型)对象存储和检索？

Question

所以我想将 JavaScript 文件 hello.js 中的对象“Hello”传递给另一个 JavaScript 文件 chat.js。

Hello 包含 Strope.Connections 等成员。

我读到我可以使用 LocalStorage，即 LocalStorage.SetItem("Hello", Hello)，然后使用 LocalStorage.getItem("Hello") 检索对象。

这对我来说不起作用，所以我进行了更多搜索并找到了 JSON stringify，例如有人在 Storing Objects in HTML5 localStorage以及 How to send javascript object from one page to another page?建议使用 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;
    }
};

这是chat.js

var Hello = {
conn: null
};

$(document).ready(function(e) { 
    Hello = JSON.parse(localStorage.getItem("hello"));
    $('#input3').bind('click', 
    Hello.connection.send("someStanza"))});

上线Hello = JSON.parse(localStorage.getItem("hello"));我尝试恢复该对象。

下面的 2 行我调用 Hello.connection.send。然而，这里很明显我无法正确传递和恢复 Hello 对象。例如，在 Google Chrome JavaScript 调试器中，我在该行收到一个错误，指出 “Uncaught TypeError: undefined is not a function”，我想说这基本上意味着 Chrome JS 引擎无法在Hello对象中找到任何connection.send成员。

这留下了两个选择。我尝试做的事情(传递不是原始数据类型的对象)以我正在做的方式是不可能的。或者，我这样做的方式是可能的，并且只是存在一些我没有看到的其他错误/问题。

如果可以的话，我做错了什么？

如果无法以这种方式传递非原始数据类型，我还能怎么做？

希望我说得足够清楚以便理解，

谢谢，兄弟，

克里斯

Answer 1

一种解决方法是 toString 该函数，然后将其存储在 localStorage 中。然后，当您从 localStorage 检索对象时，您评估该函数。这是一个快速演示(它非常愚蠢，可以根据您的需求进行优化/增强......):

http://jsfiddle.net/nmef7utv/

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;
}

在 fiddle 中，我有:

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

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

希望这对您有所帮助!