Javascript 本地存储保存HTML克隆

Javascript 本地存储保存HTML克隆,javascript,html,json,Javascript,Html,Json,我想使用localStorage保存一个包含HTML克隆的对象 var myObject["test"] = document.getElementByID("someElement").cloneNode(true); myObject["test2"] = document.getElementByID("someOtherElement").cloneNode(true); localStorage.saveObject = JSON.stringify(myObject); 但是对象s

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

var myObject["test"] = document.getElementByID("someElement").cloneNode(true);
myObject["test2"] = document.getElementByID("someOtherElement").cloneNode(true);
localStorage.saveObject = JSON.stringify(myObject);
但是对象saveObject仍然等于{}。看来,stringify不能stringify一个HTML节点,如果我碰巧以某种方式解决了保存它的问题,那么有可能将这个对象解析回一个HTML节点吗


有人知道解决方案吗?

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

一种解决方法是:

  • 获取要克隆的节点的outerHTML
  • 将outerHTML(字符串)存储在本地存储器中
  • 加载时创建新元素,将其附加到文档中
  • 将本地存储中保存的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];    
        }
    }
    
    window.saveArray=newarray();
    var clone=document.getElementByID(“someElement”).cloneNode(true);
    saveArray.push(clone.outerHTML);
    函数save(){
    localStorage[“elements”]=JSON.stringify(saveArray);
    }
    函数加载(){
    var tempsave=JSON.parse(localStorage[“elements”]);
    对于(var i=0;i
    你能给我举个例子吗?我真的不明白:(这似乎是一个很好的方法,但是:我想要存储的HTML节点实际上并不在同一个页面上,我想使用它们。因此有一个子页面www.mypage.com/subpage,其中很多HTML节点都带有类“some\u other\u element”,我想选择其中的一些(通过按钮)然后保存他们的HTML代码,在主页www.mypage.com上显示相同的代码。如果我关闭网站并重新加载它,它应该在localStorage中搜索存储的HTML元素,然后在主页上重新加载它们。