Save Form using localstorage HTML5

Question

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

You can only store strings, so you will have to serialize your form elements’ contents first. — CBroe, Nov 13 '13 at 11:25
@CBroe i know that i only can store strings thanks for information :P — Muath, Nov 13 '13 at 11:29

spacebean · Accepted Answer · 2014-09-16T11:54:21.320

11

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

edited Sep 16 '14 at 11:54

answered Nov 13 '13 at 11:28

spacebean

1,554
1
10
13

how do you check if localstorage is enabled – amdixon Nov 13 '13 at 11:31
@spacebean after getting the Item I should deserialize ? – Muath Nov 13 '13 at 11:32
Yeah, sorry Moath, added that detail above. – spacebean Nov 13 '13 at 12:23
amdixon, there are a lot of good resources for that, a simple one is the first answer here: http://stackoverflow.com/questions/16427636/check-if-localstorage-is-available . I am assuming the OP is only catering to modern browsers and has already considered the issues involved with compatibility. – spacebean Nov 13 '13 at 12:25
@spacebean i solved it without saving form into local-storage, but i guess you deserve the accepted answer cause that closest answer thing to what i asked – Muath Nov 14 '13 at 12:05
Cheers Mouth, I appreciate it. – spacebean Nov 14 '13 at 15:55
1

`.serializeObject()`? [discusson](http://forum.jquery.com/topic/serializeobject) and [API Doc](http://api.jquery.com/serializeObject/) says it does not exist. did you mean `.serializeArray()` http://api.jquery.com/serializeArray/ ? – msanford Sep 11 '14 at 19:45
Thank you, you're right and I can't believe it wasn't noticed before. I was using a common plugin (had it in my library for a while and forgot it wasn't a core function). I've added that in the code. Of course you can save and parse the data in whatever way you want, the main thing is it needs to be string when stored. – spacebean Sep 16 '14 at 11:56
this would fail if you are using radio group if you need to retore the form data – Muhammad Omer Aslam Mar 31 '19 at 14:34

mar10 · Answer 2 · 2016-06-17T20:38:41.687

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

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/12713734) — Cristik, Jun 16 '16 at 17:49
I would think that Github project links are pretty stable, but anyway: I added some details. — mar10, Jun 16 '16 at 18:51
In order to recommend a library (especially one you've written) you should provide exactly how that library will solve the OP's problem; including code using your library that will solve their exact problem. — George Stocker, Jun 16 '16 at 23:29

Save Form using localstorage HTML5

2 Answers2

Linked