To download HTML5 canvas DataURL on your computer on a button click, just create a link and point DataURL to its href attribute and trigger the click like so: ~~~ var canvas = document.getElementById(“mcanvas”); image = canvas.toDataURL(“image/png”, 1.0).replace(“image/png”, “image/octet-stream”); var link = document.createElement(‘a’); link.download = “my-image.png”; link.href = image; link.click(); ~~~ Example : @[jsfiddle](https://jsfiddle.net/saaraan/tybwmad4/)

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/)