jQuery Plugin To Store Form Fields In Session Storage - form-saver

File Size: 6.77 KB
Views Total: 2530
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Store Form Fields In Session Storage - form-saver

form-saver is a lightweight and easy-to-use jQuery plugin that stores form changed fields in local storage to help prevent users from losing data. The plugin loops through the forms who have data-save-form = save and populate them if session storage has anything for that form.

How it works:

  • Find the parent form tag and get its name
  • Get the input fields with using formName.
  • Loop through the fields and save data into session storage.
  • Lastly we set our values for current form in storage as JSON string. Parsed as JSON on page load.
  • Remove item from local storage on submit

See also:

How to use it:

1. Place both jQuery library and the jQuery form-saver plugin at the end of the document.

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="src/jq-form-saver.js"></script>

2. Add the 'data-form-name = formName' to your form element.

<form data-form-name="demo" role="form">

3. Create a button to save all the current form data into session storage.

<button type="button" data-button="save">Save Form</button>

4. Note that each form field must have a 'name' attribute as this:

<input type="email" class="form-control" name="email" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">

Change log:


  • removes data from storage on submit and data attr. name changes

This awesome jQuery plugin is developed by surgiie. For more Advanced Usages, please check the demo page or visit the official website.