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:

<!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>

Checkout the W3 oficial Web Storage documentantion.

No comments yet, leave yours!

Leave a Reply

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