javascript - Persisting checked state using localstorage -

i have taken following snippet asked question on how store checked/unchecked status of checkboxes on page in localstorage:

     $(function(){         var test = localstorage.input === 'true'? true: false;         $('[type="checkbox"]').prop('checked', test || false);     });      $('[type="checkbox"]').on('change', function() {         localstorage.input = $(this).is(':checked');         console.log($(this).is(':checked'));     }); 

when select 1 of checkboxes , refresh page, once reloads every single checkbox checked.

how make store each individual checked state?

note may have between 0 - 50 check boxes available depending on how many outstanding records there in gridview don't have fixed input id's use record id associated each row.

if want rely on localstorage solution, may this:

$(function(){     $('[type="checkbox"]').each(function () {         var $this = $(this),             name = $this.attr('name');         $this.prop('checked', localstorage[name] === 'true');     }); });  $('[type="checkbox"]').on('change', function() {     var $this = $(this),         name = $this.attr('name');     localstorage[name] = $this.is(':checked'); }); 

http://jsfiddle.net/mct7xgq2/

the first part executed on page load , sets checked state depending on localstorage[name] value, name input's name attribute.

the second part executes when checkbox being changed: takes input's name, before, instead of reading value, writes it.