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

This feature is Compatible with:

Chrome 4
Firefox 3.6
Safari 4
Internet Explorer 8

The example source code:

<!DOCTYPE html>

<html lang="en">
<script class="jsbin" src=""></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Example 4 | Developer's Blog</title>

    <h1>Simple List</h1>

    <ul id="my_list" contenteditable="true">

  <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="">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(){



Checkout the W3 oficial Web Storage documentantion.

No comments yet, leave yours!

Leave a Reply

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