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.

<form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
    <button onclick="StoreData();">store into local storage</button>
</form> 
<button onclick="RenderForm();">render from data again </button>
<form id="Copyform"><form>

JSFIDDLE please JSFIDDLE answer.

UPDATED

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.

<form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
    <button onclick="StoreData();">store into local storage</button>
</form> 
<button onclick="RenderForm();">render from data again </button>
<form id="Copyform"><form>

JSFIDDLE please JSFIDDLE answer.

UPDATED

• javascript
• jquery
• html
• forms
• local-storage

• 1 You can only store strings, so you will have to serialize your form elements’ contents first. – C3roe Commented Nov 13, 2013 at 11:25
• You want to store only form values right? – power_scriptor Commented Nov 13, 2013 at 11:27
• @CBroe i know that i only can store strings thanks for information :P – Muath Commented Nov 13, 2013 at 11:29

2 Answers 2

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;
};

Another option would be to use an existing plugin.

For example persisto is an open source project that provides an easy interface to localStorage/sessionStorage and automates persistence for form fields (input, radio buttons, and checkboxes).
(Disclaimer: I am the author.)

Note that this requires jQuery as a dependency.

For example:

<form id="originalForm">
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
    <button type="submit">store into local storage</button>
</form> 
<button id="renderForm">render from data again </button>
<form id="copyForm"><form>

could be handled like this:

// Maintain client's preferences in localStorage:
var settingsStore = PersistentObject("mySettings");

// Initialize form elements with currently stored data
settingsStore.writeToForm("#originalForm");

// Allow users to edit and save settings:
$("#settingsForm").submit(function(e){
  // ... maybe some validations here ...
  settingsStore.readFromForm(this);
  e.preventDefault();
});

// Write data to another form:
$("#renderForm").submit(function(e){
  settingsStore.writeToForm("#copyForm");
});