HTML5 Storage Problem

I have a notes box that can be used to store notes, originally I was using cookies to store the entries, then I tried HTML5 Storage and I can't get it to work, here is the code:

$(document).ready(function () {
$('#savesNotes').cl开发者_运维知识库ick(function () {            
    localStorage.nltwonotes=document.forms[0].todo1.value;
}
});

document.forms[0].todo1.value=localStorage.nltwonotes;
});

Here is some working code: Preview (type in, then view your localStorage in your console) :
http://jsbin.com/exote5/

Source:
http://jsbin.com/exote5/edit

$(document).ready(function () {
  $('#saveNotes').click(function () {
      localStorage.nltwonotes=$('#note').val();
  });
  if(localStorage.nltwonotes){
    $('#note').val(localStorage.nltwonotes);
  }
  else{
    //Not set yet
  }
});

== NOTE ABOUT THE FILE:/// PROTOCOL ==
You must have localStorage on a server (http or https). Firefox will not let you use them locally. If you are using a Mac you can use MAMP or on Windows you can use WAMP If you're on Linux you probably already know how to setup a local hosting enviroment with apache which is usually provided...

I'd recommend using the methods provided to access localStorage instead of how you're doing it:

localStorage.setItem("nltwonotes", document.forms[0].todo1.value);

Then to get a value:

document.forms[0].todo1.value = localStorage.getItem("nltwonotes");

Though, make sure you check to see if localStorage is even available:

function supports_html5_storage() {
  try {
    return 'localStorage' in window && window['localStorage'] !== null;
  } catch (e) {
    return false;
  }
}

Otherwise you'll want to fallback / tell the user to upgrade their browser to one that supports local storage.