HTML5 Local Storage

By | January 3, 2011

I love this because it is so easy and quick to show the power of feature in HTML5.
We all know the future of the web will be with HTML5 and there are many great things about HTML5 but today I want to go over just one; local Storage. If you’ve not heard about localStorage and how to use it this will be a quick taster to show you it power.
So what is local Storage? Basically it is a browser database. Basically a database that resides in the users browser and not on the server.
The difference between this database and others you may be familiar with is the fact that this is for key-value storage. This means you don’t have to write sql while using localStorage. However, this type of storage does offer a lot of possibilities for web apps. Remember one thing though, the data stored will be on a per browser basis. If a user switches between browser, it won’t use the same database. Same if they use your app on one machine and go to another somewhere else, that data will only be available on the machine it was saved. One last thing local Storage is supported by most modern browsers including Safari 4+, Mobile Safari (iPhone/iPad), Firefox 3.5+, Internet Explorer 8+ and Chrome 4+.
Now lets get into some code. The beauty of localStorage dis that unlike cookies or sessionStorage, the data stored in local Storage is still there even after the browser is closed and is shared across multiple windows. You don’t have to worry about a user deleting the cookies and all their data.
So first to set up the page. We’re going to to a very simple shopping list.

<!DOCTYPE HTML>
<html>
  <head>
     <title>Shopping List</title>
     <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
  </head>
  <body>
   	<h1>Shopping List</h1>
     <ul id="edit" contenteditable="true">
      <li>First Item</li>
     </ul>
  </body>
</html>

Now as you can see this is a very simple page. The only things to note are that I have imported the jQuery library, this is not necessary but it’s easier for me than using pure javascript and that I have used the HTML5 attribute “contenteditable” on the <ul> tag, which allows us to update the content of the page in the browser. Also I have added an id to the <ul> tag so we can reference it in jQuery.

See Local Storage Demo
Next we add the javascript to control the storage and retrieval of the of the key/value information.

<script type="text/javascript" language="javascript">
 $(function() {
  var edit = document.getElementById('edit');
  $(edit).blur(function() {
		localStorage.setItem('todoData', this.innerHTML);
		});
  // when the page loads
  if ( localStorage.getItem('todoData') ) {
		edit.innerHTML = localStorage.getItem('todoData');
		}
	});
</script>

This script tag in this demo goes under the existing script tag.
So to go through the code first of all we get the element with the id of edit and put that in a variable called edit.

var edit = document.getElementById('edit');

Then using jQuery we tell the browser that on blur ( so when we click away from the edit element ) we set a new localStorage item called todoData and we give it a value of the edit elements innerHTML. This basically gives it the value of any <li> elements in the <ul>.

$(edit).blur(function() {
		localStorage.setItem('todoData', this.innerHTML);
		});

Next we say when the page loads, if local Storage has an item called todoData then get the value and make the innerHTML of the edit element (basically putting all the <li> elements that have been created and saved in localStorage, back into the <ul>.

// when the page loads
  if ( localStorage.getItem('todoData') ) {
		edit.innerHTML = localStorage.getItem('todoData');
		}

See Final Local Storage Demo
So now if you go to the demo, update the list, navigate away from the page and the reload it it will keep you information.

Clever huh!!

3 thoughts on “HTML5 Local Storage

  1. Darius

    Hi Matt,

    everywhere I look there are mostly examples with one element ID. In your example:

    var edit = document.getElementById(‘edit’);

    and then:

    Pretty straight forward. But how do I dynamically add element IDs. For example if I want to generate a table with multiple rows. I can see how I can add first row, assign ID for each cell in the first row of each column. But then if I want to add additional rows I need a solution to create IDs dynamically.

    Does that make sense? I’m complete newbie and today is the 3rd day me trying to figure it out.

    Please advise.

    Reply
    1. Matt Walker Post author

      Hi Darius sorry for the late reply.
      You need to create a loop that will dynamically create your ids. So it would be something like this.
      for(i=0;i<amountOfRowsNeeded;i++){
      var tabRow = document.createElement('tr");
      var rowIdName = "row"+i;
      tabRow.setAttribute('id',rowIdName);
      }

      This will create the first row with an id of row0 then row1 and so on.

      hope this solves the problem. (and I hope I'm not too late)

      Reply

Leave a Reply

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