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. — C3roe
– C3roe, Commented Nov 13, 2013 at 11:25
@CBroe i know that i only can store strings thanks for information :P — Muath
– Muath, Commented Nov 13, 2013 at 11:29

spacebean · Accepted Answer · 2014-09-16 11:54:21Z

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, 2014 at 11:54

answered Nov 13, 2013 at 11:28

spacebean

1,5541 gold badge10 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

amdixon Over a year ago

how do you check if localstorage is enabled

Muath Over a year ago

@spacebean after getting the Item I should deserialize ?

spacebean Over a year ago

Yeah, sorry Moath, added that detail above.

spacebean Over a year ago

amdixon, there are a lot of good resources for that, a simple one is the first answer here: stackoverflow.com/questions/16427636/… . I am assuming the OP is only catering to modern browsers and has already considered the issues involved with compatibility.

msanford Over a year ago

.serializeObject()? discusson and API Doc says it does not exist. did you mean .serializeArray() api.jquery.com/serializeArray ?

|

mar10 · Accepted Answer · 2016-06-17 20:38:41Z

6

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

edited Jun 17, 2016 at 20:38

answered Jun 16, 2016 at 17:05

mar10

15k5 gold badges43 silver badges68 bronze badges

3 Comments

Cristik Over a year ago

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

mar10 Over a year ago

I would think that Github project links are pretty stable, but anyway: I added some details.

George Stocker Over a year ago

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.

Collectives™ on Stack Overflow

Save Form using localstorage HTML5

2 Answers 2

9 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related