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 😉

Demo

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);
}Code language: JavaScript (javascript)

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>Code language: HTML, XML (xml)

Checkout the W3 oficial Web Storage documentantion.