Do you have any of the following problems:

Js object A contains several objects B. And A,B objects according to the needs of late dynamically added functions such as (b.how =function(){… })

The native serialization you use with json.stringify () can only serialize the properties of the object; methods cannot be serialized

Take the following example:

function A(){
    this.name="A";
    this.arr=new Array();
    this.put=function(para){
        this.arr[this.arr.length]=para;
    }
}
function B(){
    this.name="B";
    this.show="";
}

var a = new A();

var b1=new B();
b1.show=function(){
    alert("function 1");
}

var b2=new B();
b2.show=function(){
    alert("function 2");
}

a.put(b);
a.put(b2);
console.log(JSON.stringify(a));Copy the code

The final output is

{"name":"A","arr":[{"name":"B"},{"name":"B"}]}Copy the code

The show methods that you dynamically bind to b1 and b2 will not be serialized, and the json string used to restore a will not be correctly restored

I found a lot of information on the Internet, zhihu, StackOverflow summed up this serialization scheme:

function serialize(obj, name){ var result = ""; function serializeInternal(o, path) { for (p in o) { var value = o[p]; if (typeof value ! = "object") { if (typeof value == "string") { result += "\n" + path + "[" + (isNaN(p)?"\""+p+"\"":p) + "] = " + "\"" + value.replace(/\"/g,"\\\"") + "\""+";" ; }else { result += "\n" + path + "[" + (isNaN(p)?"\""+p+"\"":p) + "] = " + value+";" ; } } else { if (value instanceof Array) { result += "\n" + path +"[" + (isNaN(p)?"\""+p+"\"":p) + "]"+"="+"new Array();" ; serializeInternal(value, path + "[" + (isNaN(p)?"\""+p+"\"":p) + "]"); } else { result += "\n" + path + "[" + (isNaN(p)?"\""+p+"\"":p) + "]"+"="+"new Object();" ; serializeInternal(value, path +"[" + (isNaN(p)?"\""+p+"\"":p) + "]"); } } } } serializeInternal(obj, name); return result; }Copy the code

Serialize the case again using the serialization method above:

function A(){
    this.name="A";
    this.arr=new Array();
    this.put=function(para){
        this.arr[this.arr.length]=para;
    }
}
function B(){
    this.name="B";
    this.show="";
}

var a = new A();

var b=new B();
b.show=function(){
    alert("function 1");
}

var b2=new B();
b2.show=function(){
    alert("function 2");
}

a.put(b);
a.put(b2);
console.log(serialize(a,"a"));Copy the code

This will print all the js statements that generate object A:

a["name"] = "A";
a["arr"]=new Array();
a["arr"][0]=new Object();
a["arr"][0]["name"] = "B";
a["arr"][0]["show"] = function (){
alert("function 1");
};
a["arr"][1]=new Object();
a["arr"][1]["name"] = "B";
a["arr"][1]["show"] = function (){
alert("function 2");
};
a["put"] = function (para){
this.arr[this.arr.length]=para;
};Copy the code

To complete an object a, execute the above statement using eval.

var deserialization_lang= serialize(a,"a"); //deserialization_lang generated statement var a=new Object(); eval(deserialization_lang); a.arr[0].show(); // Successful popup function 1Copy the code

It can be seen that this method can not only fully restore a object, but also restore A object ARR array in the B object.

Note: In use, if the B object holds a reference to the A object, a closed loop will result in serialization failure