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

【问题标题】：When stringifying an object, JSON turns element nodes into Objects?对对象进行字符串化时，JSON 将元素节点转换为对象？
【发布时间】：2015-11-26 16:33:34
【问题描述】：

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

我需要每天的对象来保存各种 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 中，同时保持它们的节点类型？？？？

【问题讨论】：

无法完成。您必须从存储在 JSON 中的数据重新创建节点。没那么难，你只需要存储相关信息
不能直接序列化dom元素，看这里：stackoverflow.com/questions/2303713/…
您不应该序列化 DOM 元素并保存到 localStorage。相反，您可以将真实数据 json 保存到 localStorage 中，并在需要时转换为 HTML。

标签： javascript html json dom stringify

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

您可能需要一个属性，例如定义元素类型的“类型”

var elem

parsedDays.forEach(function(day){

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

    });

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

【讨论】：

【解决方案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);

【讨论】：