Question

I’ve been looking into HTML 5’s new local storage and it seems pretty cool so far. I’ve decided to use JSON to serialize my objects into strings and to parse them back into objects, which all sounds very nice. However, it’s easier said than done. I’ve discovered that you can’t just JSON.stringify() an object and expect it to pack nicely for you, but I can’t figure out what I have to do instead.

That’s not all, though: my object contains two arrays, each of which holds another type of object and one of which is multidimensional. Here’s what my rather complex and inter-dependent object architecture looks like:

function Vector2(x, y) {
    this.x = x;
    this.y = y;
}

function Bar(ID, position) {
    this.id = id;
    this.position = position;
}

function Goo(state, position) {
    this.on = state;
    this.position = position;
}

function Foo(name, size) {
    this.name = name;
    this.size = size;
    this.bars = new Array(width)
    this.goos = new Array(10);

    this.Initialize();
}

Foo.prototype.Initialize() {
    for(var x = 0;x<this.size.x;x++) {
            this.bars[x] = new Array(this.size.y);

        for(var y=0;y<this.size.y;y++) {
            this.bars[x][y] = new Bar(x + y, new Vector2(x, y));
        }
    }

    for(var i = 0;i<this.goos.length;i++) {
        this.goos[i] = new Goo(on, new Vector2(i, i/2 + 1));
    }
}

Each of those objects has plenty of additional functions as well, each added using the same prototype method that I used to add the method to Foo. Like I said, complex. My question is, how do I serialize all this? Do I really need to tack on toJSON() functions to every object?

Finally, once I’ve packed all this and saved it to localstorage, I know how to retrieve it, but I’m pretty much clueless on how to unpack it with JSON. That’s another matter for another time, though, and I suspect it might be a bit easier to figure out on my own once I learn how to pack everything up.

Note: I wouldn’t normally such a potentially broad question, but I couldn’t really find anything here on SO or with my (admittedly weak) Google-fu that really addresses the issue, and I don’t know how to break this question down any further.

Answer 1

Usually, you don’t just serialize complex data structures in javascript because the normal serialization doesn’t handle multiple difference things all have references to the same object, can’t handle circular references, etc…

What I would recommend instead is that you figure out what the real state of your application is. Not the whole instantiated object structure, but what is the minimum amount of information that is actually needed to reconstruct the state of your data. Then, once you’ve figure that out (it should only be data, no actual objects), then you can create functions or methods to get that data from your data structures or create a new data structure from the data.

In looking at your code, the actual state of a Foo object is a two dimensional array of Bar objects and a one dimensional array of Goo objects and a name and a size. A Bar just has an x, y and id. A Goo just has a state and an x and a y. That would be pretty easy state to write a Foo method to generate and a Foo method to accept that state from saved storage.