This is another example of the [previous post](https://www.sanwebe.com/2013/03/addremove-input-fields-dynamically-with-jquery) about dynamically adding and removing of input fields. It’s similar in function but we don’t use `x` as field counts, here we just directly access the `childNodes` inside the wrapper element and accomplish the same goal. The jQuery: ~~~ var max_fields = 10; var wrapper = $(“.input_fields_wrap”); var add_button = $(“.add_field_button”); var remove_button = $(“.remove_field_button”); $(add_button).click(function(e){ e.preventDefault(); var total_fields = wrapper[0].childNodes.length; if(total_fields < max_fields){ $(wrapper).append('‘); } }); $(remove_button).click(function(e){ e.preventDefault(); var total_fields = wrapper[0].childNodes.length; if(total_fields>1){ wrapper[0].childNodes[total_fields-1].remove(); } }); ~~~ The HTML ~~~ Add Field Remove Field~~~ Demo : @[jsfiddle](https://jsfiddle.net/saaraan/y4c0jnkh/2/)

This simple jQuery function can be used to trigger a callback everytime user stops typing. Just apply this to any text input fields such as textarea to see it in action. ~~~ (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); ~~~ Usage : ~~~ $(‘textarea’).donetyping(function(callback){ //your code goes here. }); ~~~ @[jsfiddle](https://jsfiddle.net/saaraan/hehrqLhe/3/)

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: ~~~Delete Stored Item~~~ ###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 @[jsfiddle](https://jsfiddle.net/saaraan/w066gukL/1/)