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 😉
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<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.
No comments yet, leave yours!