2

我想使用 localStorage 来保存一个包含 HTML 克隆的对象。

var myObject["test"] = document.getElementByID("someElement").cloneNode(true);
myObject["test2"] = document.getElementByID("someOtherElement").cloneNode(true);
localStorage.saveObject = JSON.stringify(myObject);

但是 Object saveObject 仍然等于 {}。看来,stringify 无法对 HTML 节点进行字符串化,如果我碰巧解决了保存它的问题,是否可以将此对象解析回 HTML 节点?

有人知道解决方案吗?

4

2 回答 2

2

您的节点引用将从字符串化对象中删除,因为根据定义,JSON 不能包含函数或节点引用 - 只能包含原语或子数组/对象。换句话说,您无法在本地存储中保留对节点的引用。相反,您需要通过 ID、类或其他方式记录对它们的引用。

[编辑,回应OP的评论]

JSON 和 JS 对象不是一回事。前者是从后者衍生而来的,但它们并不相同。JSON 是一种存储方式,因此不能包含对任何动态的引用。HTML 元素不会永久存在;它们作为运行时 (DOM) 概念存在,一旦离开页面就会消失。因此,它们不能以任何有意义的方式存储。

因此,JSON 只能存储原始数据——字符串、数字和布尔值——以及允许它嵌套的结构——数组和子 JSON 定义。

因此,当您stringify在对象上运行时会发生不合适的部分被剔除。在你的情况下,这两个属性。因此,您需要以更永久、可重新访问的格式存储对元素的引用——通过 ID 或类,或其他一些提醒机制。

var obj = {el1: '#some_element', el2: '.some_other_element'};
localStorage.saveObject = JSON.stringify(obj);

在那里,我将我的两个元素保存为对它们的 ID(第一个)和类(第二个)的引用。

然后,当您重新加载本地存储时,您会根据这些因素查找元素,例如将它们提供给 jQuery 选择器。

于 2013-07-19T10:04:59.930 回答
0

一种解决方法是:

  1. 获取要克隆的节点的outerHTML
  2. 将 outerHTML(字符串)存储在本地存储中。
  3. 在加载时创建一个新元素,将其附加到文档中。
  4. 将保存在本地存储中的 outerHTML 分配给新元素。

快速示例:

window.saveArray = new Array();
var clone = document.getElementByID("someElement").cloneNode(true);
saveArray.push(clone.outerHTML);

function save(){
    localStorage["elements"] = JSON.stringify(saveArray);
}
function load(){
    var tempsave = JSON.parse(localStorage["elements"]);

    for (var i = 0; i < tempsave.length; i++){      
        var element = document.createElement('div');
        document.getElementById('element-container').appendChild(element); 
        element.outerHTML = tempsave[i];    
    }
}
于 2016-03-23T06:43:40.797 回答