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

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节点进行字符串化，则它将返回"{}" 。因此无法将节点存储在本地存储中。

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

Answer 2

您可能需要具有定义元素类型的属性，例如“ type”

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);