localStorage保存HTML克隆

我想使用localStorage来保存包含HTML克隆的对象。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节点？

有人知道解决方案吗？

来源

2013-07-19 Loki

您的节点引用将从字符串化对象中删除，因为根据定义，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-19 10:04:59 Utkanos

你能不能举个例子？我真的不明白它:( – Loki

那么这似乎是一个相当不错的方式，但：我想要存储的HTML节点实际上不在同一页上，我想要使用它们。子页面www.mypage.com/subpage，其中很多html节点都与“some_other_element”类相关，我想通过Button选择其中的一些（并通过Button）并保存它们的HTML代码以在主页上显示相同的代码www.mypage.com。如果我关闭网站并重新加载它，它应该在localStorage中搜索存储的HTML元素并将它们重新加载到主页面上。 – Loki

一个解决办法是：

得到你想要克隆的节点的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];  
    } 
}

来源

2016-03-23 06:43:40

localStorage保存HTML克隆

回答

相关问题