Use local storage to save and restore current work when user leave or refresh current page

[GoogleCodeExporter]

What steps will reproduce the problem?
1. user close, refresh, or press back on browser
2. user lose their current work

What is the expected output? What do you see instead?

Use local storage to save and restore current work when user leave or refresh 
current page

/**
* backup code blocks
*/
function backup_blocks() {
  if(typeof(Storage)!=="undefined")
  {
    var xml = Blockly.Xml.workspaceToDom( Blockly.mainWorkspace );
    localStorage.setItem('data',Blockly.Xml.domToText( xml ));
    console.log("backuped");
  } else {
    // Sorry! No web storage support..
  }
}

/**
* restore code blocks
*/
function restore_blocks() {
  if(typeof(Storage)!=="undefined"){
    if(localStorage.data!=null){
      var xml = Blockly.Xml.textToDom(localStorage.data);
      Blockly.Xml.domToWorkspace( Blockly.mainWorkspace, xml );
      console.log("restored");
    }
  } else {
    // Sorry! No web storage support..
  }
}

then we can put restore_blocks() in init() method,

and backup_blocks() in unload event

$(window).unload(backup_blocks); (a jquery statement)

To make event handling simpler, I'd like to include jquery to simplifier the 
works. 
Is there any concern not to do it?

Original issue reported on code.google.com by gasolin on 15 Jun 2012 at 2:12

[GoogleCodeExporter]

This looks like a promising addition.  The catch is how does a user clear the 
workspace?  Currently you just hit reload.  But with this code the blocks would 
follow you.  This would be unfortunate if you hit the 'airstrike' button on the 
playground a few times.  :)

I think that in addition to this feature, we need a clear-all UI element.  What 
would that look like?  Each of the three demos look pretty different.

Original comment by neil.fra...@gmail.com on 15 Jun 2012 at 5:32

[GoogleCodeExporter]

Maybe the best UI for the demos would be to pop open a window.confirm on page 
load asking "Restore saved blocks?"  Ok would restore, cancel would delete the 
local storage.  That way we wouldn't need a clear-all UI element.

As for jquery, I'd prefer to eventually use Closure instead since it works much 
better with the Closure compiler, type checker, Google's build system, etc.  
But in this case you can just call Blockly.bindEvent_(window, 'unload', null, 
backup_blocks)

Original comment by neil.fra...@gmail.com on 15 Jun 2012 at 5:49

[GoogleCodeExporter]

How about add a 'clean' button after 'run' button? 

Every time user will get their last blocks without worry.
Once user want to clear the blocks, they can do it explicitly on screen.

Original comment by gasolin on 15 Jun 2012 at 7:51

[GoogleCodeExporter]

commited in r242

Original comment by gasolin on 15 Jun 2012 at 1:06

• Changed state: Fixed