在 Javascript 中保存和恢复对象？

Question

I am creating a basic web-based diagramming tool using Javascript and the Raphael Library to create the shapes. I would now like to know how to save and restore objects that i have created.

Belows code creates a basic shape, and enables dragging. How would i go about being able to save and restore the objects such as this:

var cubeD = paper.rect(400, 400, 50, 50);
    cubeD.attr({"fill":"yellow"});
    cubeD.draggable.enable();
    cubeD.name = 'cubeD';
objArray.push(cubeD);
objArray_txt.push(cubeD.name);
objAssoc['cubeD'] = cubeD;

I tried JSON to store the object but the following code doesnt seem to work:

var myJSON = JSON.encode(cubeD);

But i get the error

TypeError: cyclic object value

What would more experienced developers suggest?

Answer 1

https://github.com/douglascrockford/JSON-js

The cycle.js file allows cyclic references.

Then you just need to use those functions to avoid your error and just use the so-called "normal" JSON methods to save and restore your object (ask if you can't figure how). When using the "normal" JSON method to restore the object, don't forget to give a new instance of the constructor of your object as argument so that it has all the methods you need and behave as you expect (because JSON only saves data, not functions and therefore, it can't store the Constructor).

Answer 2

You can't bank on being able to serialize an object made by an external framework. Either that API supports it or it doesn't (I'm not familiar with Raphael).

The way to solve this is to have an intermediate format which is probably a plain chunk of JSON, and serialize that. This contains the spec to your object. A method would call your API to build the object from your JSON object. This would be called after deserialization.

Answer 3

I use this library on most of my projects: https://github.com/douglascrockford/JSON-js

It has a $.toJSON method that will serialize/deserialize javascript into a string. I'm not sure if this is the best approach but it certainly works for us. I put the JSON in a cookie and read from it as well.

Answer 4

Try this Raphael SketchPad