The jQuery plugin allows you to save data from form fields in the web storage.

This saves users from a situation when they lost all data entered into the form. This can happen due to a crash browser, disconnection, reload the page, etc.

Plugin is supported in Internet Explorer 8+, Firefox 3.5+, Opera 10.5+, Chrome 4.0+, and Safari 4.0+.

DataSaver plugin uses the jQuery JavaScript library, only. So, include just these two javascript files in your header.

<script src="js/jquery.js"></script>
<script src="js/jquery.DataSaver.js"></script>

Select elements whose data you want to save.

<textarea class="saveme"> </textarea>

After it, call the jQuery DataSaver plugin.

$('.saveme').DataSaver();

You can pass an options object in plugin init method.

• timeout : Automatic save interval data (in milliseconds). If zero, it is not used (Default: 0);
• events : List of events that cause data save. If undefined or '', it is not used (Default: change).

$('.saveme').DataSaver({timeout: 1000, events: "change keyup"});

You can call some methods. Just pass their name.

• save : Save the data in web storage;
• load : Load the data from web storage;
• remove : Remove the data from web storage;
• stop : Stop the DataSaver.

$('.saveme').DataSaver('remove');

You can listen DataSaver events.

• DataSaver_start
• DataSaver_stop
• DataSaver_save
• DataSaver_load
• DataSaver_remove

You can also get localStorage key (DataSaver_key) and value:

$(document).on("DataSaver_save DataSaver_load DataSaver_remove", function(e) {
    console.log(e.type);
    console.log(e.target.DataSaver_key + " : " + localStorage[e.target.DataSaver_key]);
    console.log("");
});

View example