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:

• Automatically Persist Text Field Values Locally - Garlic
• jQuery Plugin to Restore User Previously Entered Values - Remember State
• jQuery Plugin To Autosave Form Content - autoSave
• jQuery Plugin For Auto Saving Form Values
• jQuery Plugin to Save Form Fields Values To localStorage - phoenix
• jQuery Plugin To Store Form Values Into Local Storage - saveIt

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:

2016-09-26

• 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.