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 😉

Better look at the Live Demo http://php.quicoto.com/examples/4/

This feature is Compatible with:

Chrome 4
Firefox 3.6
Safari 4
Internet Explorer 8

The example source code:

[php]
<!DOCTYPE html>

<html lang="en">
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Example 4 | Developer’s Blog</title>
</head>
<body>

<header>
<h1>Simple List</h1>
</header>

<section>
<ul id="my_list" contenteditable="true">
<li></li>
</ul>
</section>

<p>Add some items and refresh the page.</p>

<p><button id="reset_it" name="reset_it" onClick="javascript:reset_me();" />Reset Local Storage</button></p>

<p>Back to the post <a href="http://php.quicoto.com/html5-local-storage/">HTML5 Local Storage</a></p>

<script type="text/javascript">

$(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();
window.location="/examples/4/";

}
</script>

</body>
</html>

[/php]

Checkout the W3 oficial Web Storage documentantion.

No comments yet, leave yours!

Leave a Reply

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