We all know what HTML5 local storage is, it allows us to store data locally, which is saved across browser sessions and when the page is closed, data also gets automatically cleared.

In this example, we are going to store user input data in real time and then retrieve it. The idea is to save user input data temporarily so that the accidental page reload or tab close doesn't cause the data loss.

HTML Form

Let's create an HTML form:

<form>
<textarea id="mytext" rows="10"></textarea>
<button type="button">
Delete Stored Item
</button>
</form>

jQuery Done Typing

Now let's write a jQuery function that will trigger callback every time user stops typing for few seconds.

(function($) {
$.fn.donetyping = function(callback){
    var _this = $(this);
    var x_timer;    
    _this.keyup(function (){
        clearTimeout(x_timer);
        x_timer = setTimeout(clear_timer, 1000);
    }); 

    function clear_timer(){
        clearTimeout(x_timer);
        callback.call(_this);
    }
}
})(jQuery);

Check for HTML5 local storage support.

Before we start using HTML5 local storage, we need to check whether user's browser supports HTML5 storage.

/*function to check HTML5 storage support in user browser*/
function _support_html5_storage() {
      try {
        return 'localStorage' in window && window['localStorage'] !== null;
      } catch (e) {
        return false;
      }
}

Store Data locally when the user stops typing.

It's time to call our donetyping() jQuery function here, which will help us store data periodically. We use localStorage.setItem(keyName, keyValue) to store the item locally.

/* set item in local storage */
$("#mytext").donetyping(function (e){
    if(_support_html5_storage()){
        localStorage.setItem($(this).attr("id"), $(this).val());
    }
});

Retrive locally stored data.

Just use localStorage.getItem( KeyName) to retrieve locally stored data back to textarea.

/*retrive item from local storage*/
if(_support_html5_storage()){
    var _textarea = $("#mytext");
    if($.trim( _textarea.val()) == ''){
        var stored_item = localStorage.getItem( _textarea.attr("id"));
        _textarea.val(stored_item);
    }
}

And to remove individual items, just use localStorage.removeItem(KeyName) like so:

$("button").click(function(e){
    e.preventDefault();
    $("#mytext")[0].reset;
    localStorage.removeItem($("#mytext").attr("id"));
});

Demo