Saving form state after a page refresh

I have a list of checkboxes.

If the page is refreshed before the u开发者_开发技巧ser submits the form, I want the state of the checkboxes (checked or not checked) to be preserved.

Ie: user selects option 1, option 4 and option 5. The page refreshes and option 1, option 4 and option 5 remain checked.

I have looked into serialising then storing a cookie but I just cant wrap my head around it.

Any help would be appreciated.

You can store data in cookies (you could use jquery.cookies.js) when user select option

$('#select_element').change(function() {
  $.cookies.set('check_box', $(this).val());
});

and when you load page put data in check box

$(document).ready(function() {
  if ((check = $.cookies.get('check_box')) != '') {
     $('#select_element').val(check);
  }
});

But I not test it.

If all your visitors happen to use modern browsers then you can use sessionStorage.

Session storage works like a JavaScript object that persists between requests for as long as the window remains (or until you delete the data manually). Javascript example:

sessionStorage.varName = 3;. 

It works in at least Chrome, Firefox and Safari.