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.