HTML5 localStorage

Question

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 with contenteditable="true" and an id of "edit" with one li inside it.

Of course, I have Jquery linked.

Am I doing anything wrong here?

Answer 1

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')); }

});