Why doesn't this javascript code work with the html5 (saving an ordered list in local storage)?

Question

I have a unordered list in HTML and I want it so that the content is editable and saves locally, so that when you refresh the edited list is there instead of the default one.

HTML:

<ul id="items" contenteditable="true">
    <li> Read up on HTML</li>
    <li> Learn new things in HTML5</li>
    <li> Try testing my knowledge by building a mobile app</li>
</ul>

JAVASCRIPT:

$(function () {
    var items = document.getElementById('items');
    $(items).blur(function () {
        localStorage.setItem('itemData', this.innerHTML);
    });
    if(localStorage.getItem('itemData')) {
        items.innerHTML = localStorage.getItem('itemData');
    }
});

Answer 1

That code does work after blurring the element. Maybe this would work better with the keyup event.

$(items).keyup(function () {
    localStorage.setItem('itemData', this.innerHTML);
});

Answer 2

Ok, so I'm new and might be totally missing the point. But in the code you posted you didn't refresh the list. When I was making a dynamic list I put the refresh in the function that makes the list. eg $(items).listview('refresh');