HTML5 Local Storage Example

Creating a local storage example using a To Do list.

First create an HTML file with an unordered list. The unordered list must have the html5 contenteditable=”true” attribute to allow the content to be modified. Also give the UL an ID so it can be targeted.

$(document).ready(function() {
var edit = document.getElementById('editableList');
$(edit).blur(function() {
localStorage.setItem('toDoData', this.innerHTML);
});
//when the page loads
if(localStorage.getItem('toDoData')){
edit.innerHTML = localStorage.getItem('toDoData');
}
});

View the Example

In the inspector you can deleted the stored data. Note the data is stored per browser.
Screen shot 2011-03-14 at 9.47.08 PM

A Little More About Local Storage

HTML5 storage provides a way for web sites to store information on your computer and retrieve it later. The concept is similar to cookies, but it’s designed for larger quantities of information. Cookies are limited in size, and your browser sends them back to the web server every time it requests a new page (which takes extra time and precious bandwidth). HTML5 storage stays on your computer, and web sites can access it with JavaScript after the page is loaded. – http://diveintohtml5.org/

Checkout my HTML5 Textmate Bundle, localStorage Snippets just added.

Update : Here is a good method to save JSON as strings to LS and the parsed again later when needed. Click Here

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>