Edit in JSFiddle

#mytext {
    width: 400px;
    border: 1px solid #c7c7c7;
    box-shadow: 0px 0px 12px 1px #ccc;
    margin: 20px auto;
    display: block;
    padding: 10px;
}
button{
    width: 200px;
    padding: 10px 0;
    margin: 0 auto;
    display: block;
}
<form>
<textarea id="mytext" rows="10"></textarea>
<button type="button">
Delete Stored Item
</button>
</form>
(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);

/*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;
	  }
}

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

/*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);
	}
}

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