How to take a snap of DOM and reconstructure via that snap?

Question

So this is 2 questions?

What I'm gonna do is this:

User can modify the elements on the page,and after modifying he can save the changes,and next time when he opens the page,it's like when he saved it.

It's a little similar to http://www.google.com/ig,which saves your change when placing the widgets. And I've found it'll send requests like http://www.google.com/ig/setp?et=4b20aa66V7sx6KZ1&mp=2_1%3A1_2%3A11_2%3A10_2%3A9_2%3A3_2%3A4_2%3A5_2%3A6_2%3A_opt_3%3A7_3 each time you place the widgets,but I can't decipher what it means.

11_1:1_1:2_1:10_2:9_2:3_2:4_2:5_2:6_2:_opt_3:7_3 is what that url contains after urldecode,can someone guess out the meaning of it?

Answer 1

If you want to save the webpage as an object or string and then reload it later, then have a look at innerHTML.

EDIT

If you want to save the state of several items, then you should probably do that manually. Saving the entire DOM will save way too much useless information. So, if you need to save the position (x, y) and size (width, height) of a list of elements, then you need to loop through all those items and fetch the properties, store them in an object, and then store the object in a database (maybe as JSON). Next time the user logs on, you retrieve the state from the database, convert it into an object, loop through it and then set all those properties for every element. Something like innerHTML will not save properties of the DOM, only attributes.

Answer 2

You should not save the DOM of your page. What if you release another version, with improved styles, different class names and new tags? The user would always see the old page from the last time he saved.

Instead you should store some kind of high-level layout data, like coordinates of widgets for example.

Answer 3

Saving the DOM is probably not what you want to do. (See the other answers for hints.) However, if you were really adamant about it, this is probably how you would go about doing it:

var myid = 'some-div-i-want-to-save';
var element = document.getElementById(myid);
// serialize as string
var elementstring = element.innerHTML;
// make a copy of the DOM tree for reuse in Javascript
var elementdom = element.cloneNode(true);