Question

所以我正在做一个小小的个人项目，我遇到了一个问题。

我需要每天对象来保存各种dom元素对象。这些对象实例存储在一个数组中，然后该数组需要存储到localStorage中以便以后加载。

问题是，当我执行JSON.stringify然后JSON.parse时，它将HTML节点转换为对象。因此，当我尝试追加元素时，它告诉我第一个参数不是节点。

function save() {

        localStorage.days = JSON.stringify(global.days); 
        localStorage.numberOfDays = global.numberOfDays;
        localStorage.totalCount = global.totalCount;

    }

    function load() {

        var parsedDays = JSON.parse(localStorage.days);
        parsedDays.forEach(function(day){

            document.getElementById("mainPage").appendChild(day.textObject);

        });

任何人都知道如何在保持节点类型的同时将一组包含元素的对象放入localStorage中？

Answer 1

如果您尝试对dom节点进行字符串化，那么它将返回"{}"。因此无法存储节点，因为它位于localstorage中。

您可以做的是存储有关localstorage中节点的信息，并根据该信息重新创建您的节点并将其添加到您的dom中。

Answer 2

您可能需要拥有一个属性，例如＆＃39; type＆＃39;定义元素类型

var elem

parsedDays.forEach(function(day){

   elem = document.getElementById("mainPage").createElement(day.type);
   elem.attributes = day.attributes;
   elem.innerHTML = day.textObject;

    });

或类似的东西，不太确定没有看到你的day对象

Answer 3

使用JSON.stringify和JSON.parse

示例代码：

Element.prototype.toJSON = function (){
    return {nodeType:this.nodeType, outerHTML:this.outerHTML};
};
function replacer(k,v){
    if(v.nodeType===1 && v.outerHTML){
        var ele = document.createElement('html');
        ele.innerHTML = v.outerHTML;
        return ele.removeChild(ele.firstChild);
    }
    return v;
}

//test
var jstr = JSON.stringify({ele:document.body});
var json = JSON.parse(jstr,replacer);
console.log(jstr);
console.log(json);

在对对象进行字符串化时，JSON会将元素节点转换为对象吗？

3 个答案: