Question

我想使用localStorage来保存包含HTML-Clones的对象。

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

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

有人知道解决方案吗？

Answer 1

您的节点引用将从字符串化对象中删除，因为根据定义，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选择器。

Answer 2

一种解决方法是：

获取要克隆的节点的outerHTML
将outerHTML（字符串）存储在本地存储中。
在加载时创建一个新元素，将其附加到文档中。
将localstorage中保存的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];    
    }
}

localStorage保存HTML克隆

2 个答案: