javascript - HTML5 local storage to save notes -

i created note web app allows user create several notes , navigate between them using various tabs on left.

now want these notes save in local storage added following code:

$(document).ready(function() {     $(window).unload(savesettings);         loadsettings();     });      function savesettings() {         localstorage.notes = $('#notes').html();     }      function loadsettings() {         $('#notes').html(localstorage.notes);     } } 

it works in degree. meaning whole div saved in cache reason when reload page can see different tabs not text wrote. whole point save notes it's problem if can't see text wrote.

i unfortunately not knowledgeable on javascript & jquery, have no idea do.

i believe smarter save each tabs , textarea individually in cache instead of whole div don't know how that.

if can me or @ least guide me, appreciated.

the "value" of <textarea> field apparently not become part of innerhtml of element, it's accessible instead via .val() jquery method or .value dom property.

it better abstract content of tabs e.g. array, , recreate dom elements around when load page.

this ensure if redesign content old notes don't appear wrong rendering.

for example (untested):

function savesettings() {     var notes = $('#notes textarea').map(function(ix, el) {         return el.value;     });     localstorage.notes = json.stringify(notes); }  function loadsettings() {     var notes = json.parse(localstorage.notes);      // rebuilding divs left exercise     ... }