javascript - Save Form using localstorage HTML5

Is there a way to Save from into localstorage
and reuse it again, like this logic:

form ::::::::::::saveINTO:::::::::::::::> localstorage

form <::::::::::::getFROM::::::::::::::: localstorage

after filling the form with data , I want to save the form with its contents in the localstorage, then when i want to fill other from with stored data.

    First name: 
    Last name: 
    
 

JSFIDDLE
please JSFIDDLE answer.

UPDATED

Answer

You can do that easily, but if you want to store an array you will need to serialize or encode it first because localStorage doesn't deal with arrays. e.g.:

var yourObject = $('#your-form').serializeObject();

To save you do either:

localStorage['variablename'] = JSON.stringify(yourObject) or localStorage.setItem('testObject', JSON.stringify(yourObject));

and to retrieve: JSON.parse(localStorage['yourObject']); or JSON.parse(localStorage.getItem('yourObject')); and then the field values are available as yourObject.fieldName;

EDIT: In the example above I used serializeObject which is a jQuery plugin. The code used is below. (You can use serializeArray if you prefer but you will have to do more work to make your data usable once retrieved):

jQuery.fn.serializeObject = function () {
  var formData = {};
  var formArray = this.serializeArray();

  for(var i = 0, n = formArray.length; i < n; ++i)
    formData[formArray[i].name] = formArray[i].value;

  return formData;
};