How to use HTML5 localStorage properly?

So I just read Nettut's video about HTML5 local storage. However for some reason I cannot get it to work on my computer. (Ubuntu 10.04 Namoroka 3.6.9pre or Google Chrome 5). I'm using this javascript code:开发者_运维问答

$(function() {
    var edit = document.getElementById('edit');
    $(edit).blur(
        function() { 
            localStorage.setItem('todoData', this); 
        }
    );

    if ( localStorage.getItem('todoData') ) { 
        edit = localStorage.getItem('todoData'); 
    }
});

I then have a <ul contenteditable="true" id="edit"> with one <li> inside it.

Of course, I have Jquery linked.

Am I doing anything wrong here?

You're just rebinding the variable edit to point to the item in localStorage. This won't produce any observable effect. I think you want to replace the contents of the element referenced by edit, so you'll want to do something like this:

$(function() {

    var edit = $('#edit');

    edit.blur(function() { localStorage.setItem('todoData', edit.html()); });

    if ( localStorage.getItem('todoData') ) { edit.html(localStorage.getItem('todoData')); }

});