jQuery and HTML5 DOM change UNDO function

Question

Hello, I have a container div where several spans are draggable. I want to build an UNDO function for them. I am thinking at:

1. when span attributes are changed (position, css) the script detects a DOM change
2. the DOM change is stored via HTML5 localStorage
3. When the UNDO function is called the last version of the DOM replace the current.

I have the basic localStorage code that will record the last DOM state:

$('#undo').live('click', function() {

var testObject = $('#container').html();

// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');

alert( retrievedObject );
// retrievedObject should now replace the current DOM

});
});

right now this code just takes the current DOM and stores it. The alert is displaying what is in the localstorage. I should probably try to store several DOM states and put them in variables. After that, on each UNDO, to delete one variable... I am not sure that this is the way to do it.

Any inputs on this one? Thank you

Answer 1

First, focusing on your code: I think it's fairly correct and it should do the job. After all you are just putting a string in the localStorage and getting it back.

Now, some thoughts:

• What's the "html" of "#container"? If it's just a bunch of strings, ok. Otherwise, at every "restore" you are rebuilding that branch of the DOM. If this is "heavy" or not, it's up to what exactly are you doing.
• Why do want to use localStorage? What's in the localStorage is local to the browser in which it's created. This means that your UNDO functionality will not "be possible" if the users opens the same page from another browser instance.
• Are you sure the default UNDO of the browser is not enough for you? But I guess not, and I assume you are NOT undoing stuff that simply involves some "<input type="text" />" or "<textarea />"

Are you going to implement a "stack" of UNDO-able operations? If you do that would be cool ;)