jQuery Plugin to Save Form Data In Web Storage - DataSaver

Just another jQuery plugin helps save form data your user input into localStorage and restore it in case the web page is refreshed/closed/crashed accidentally.

You might also like:

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

How to use it:

1. Include the latest jQuery library and jQuery dataSaver plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.DataSaver.js"></script>

2. Create form fields with the same Class 'save'.

<form class="demo">

<input type="text" id="text" name="text" class="save" />

<input type="radio" name="radio" class="save" value="one">

<select class="save" id="select" name="select">
<option selected="selected"></option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>

<textarea class="save" rows="5"></textarea>

...

</form>

3. Save data for form fields with class "save" and clear data after submit or reset "example_form"

<script type="text/javascript">
$(document).ready(function() {
$(".demo .save").DataSaver({ events: "change keyup" });
			
$(".demo").on("submit reset", function() {
$('.demo .save').DataSaver("remove");
});
});
 </script>

4. Options.

$(".demo .save").DataSaver({ 

// Automatic save interval data (in milliseconds). 
// If zero, it is not used
timeout: 0, 

// List of events that cause data save. 
events: "change keyup",

//  Array of properties window.location object for building key
keyUrlAttrs: ["host", "pathname"],

// Function that return a string that is used for building key
keyExtra: function() { 
  return "";
}

});

Change log:

v0.1.2 (2015-04-21)

• Add keyUrlAttrs and keyExtra options

---

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