jQuery Plugin To Autosave Form Content - autoSave

autoSave is a jQuery plugin that automatically saves the draft versions of your content within the specified time to local storage and can restore them as you accidentally close or refresh the current page. The example below will show us how to add auto save capability to a textarea element.

See also:

• jQuery Plugin For Auto Saving Form Values
• jQuery Plugin to Restore User Previously Entered Values - Remember State

Basic Usage:

1. Load jQuery library and jQuery autoSave plugin

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

2. Markup Html Structure. 

<textarea id="text"></textarea>
<div>
<input type="button" id="clear" value="Clear autoSaved Data" />
<input type="button" id="refresh" value="Refresh Page" />
<span id="msg"></span> </div>

3. The javascript

<script type="text/javascript">
$(function() {
if (localStorage) {
var content = localStorage.getItem("autoSave");
if(content) {
$("#text").text(content);
}
}

$("#text").autoSave(function() {
var time = showTime();
$("#msg").text("Draft Autosaved " + time).show();
}, 2000);

$("#refresh").click(function() {
location.reload();
});

$("#clear").click(function() {
localStorage.clear();
location.reload();
});

function showTime() {
var timeNow = new Date();
var hours = timeNow.getHours();
var minutes = timeNow.getMinutes();
var seconds = timeNow.getSeconds();
var timeString = "" + ((hours > 12) ? hours - 12 : hours);
timeString += ((minutes < 10) ? ":0" : ":") + minutes;
timeString += ((seconds < 10) ? ":0" : ":") + seconds;
timeString += (hours >= 12) ? " P.M." : " A.M.";
return timeString;
}
});
</script>

Auto save is an useful functionality which helps to reduce the risk of data loose. Nowadays, the auto-save functionality has been used in a broad range of web projects like signup form, text editor, etc.

---

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