HTML5 Local Storage

An other cool feature in the new HTML5 is the Local Storage.

You can save date without any database or files.

With a simple JavaScript function you can edit just using the broswer. You can refresh and even restart the brower and the information will be there ๐Ÿ˜‰


View Demo


Test Local Storage

For some browsers (Safari private mode on Mac and iOS) it might fail if you just try to set the localStorage directly.

First you have to test it:

function testLocalStorage() { try { localStorage.setItem(storageName, storageName); localStorage.removeItem(storageName); return true; } catch(e) { return false; } } if( testLocalStorage() ){ localStorage.setItem('Your-Item-Name', true); }

Demo Code

<section> <ul id="my_list" contenteditable="true"> <li></li> </ul> </section> <button id="reset_it" name="reset_it" onClick="javascript:reset_me();" />Reset Local Storage</button> <script> $(function() { var my_list = document.getElementById('my_list'); $(my_list).blur(function() { localStorage.setItem('my_data', this.innerHTML); }); // when the page loads if ( localStorage.getItem('my_data') ) { my_list.innerHTML = localStorage.getItem(โ€˜my_dataโ€™); } }); function reset_me(){ localStorage.clear(); // This should be your URL, so it just refreshes window.location="/examples/4/"; } </script>

Checkout the W3 oficial Web Storage documentantion.

Leave a Reply

Add <code> Some Code </code> by using this tags.