Welcome to Instant HTML5 Local Storage How-to, where we will take you on a journey through using Local Storage, using the new HTML5 standard tags, which are now available in most modern browsers.
When using HTML5 Local Storage, there are two types that you can use—local storage and session storage. We'll begin by looking at the former first, using a simple form as the basis for our recipe.
Perform the following steps:
localdemo.html
:<!DOCTYPE html> <html> <head> <script src= "http://code.jquery.com/jquery-1.8.1.min.js"></script> <script type="text/javascript"> </script> </head> <body> </body> </html>
<script>
tags, add the following function. This copes with storing the information within the browser.<script type="text/javascript"> function storeItem() { var item = $('#item').val(); var items = localStorage.getItem('myItems'), if (items != null) { items = JSON.parse(items); } else { items = new Array(); } items.push(item); localStorage.setItem('myItems', JSON.stringify(items)); refresh(); } </script>
<script type="text/javascript"> function storeItem() { var item = $('#item').val(); var items = localStorage.getItem('myItems'), if (items != null) { items = JSON.parse(items); } else { items = new Array(); } items.push(item); localStorage.setItem('myItems', JSON.stringify(items)); refresh(); } function refresh() { var items = localStorage.getItem('myItems'), var ul = $('ul'), ul.html(''), if (items != null) { items = JSON.parse(items); $(items).each(function (index, data) { ul.append('<li>' + data + '</li>'), }); } } $(function () { refresh(); }); </script>
</body>
tag:Enter item: <input type="text" id="item" /> <input type="button" value= "store" onclick="storeItem()" /> <br /> <ul></ul>
Now we've seen Local Storage in action, let's take a look at how it works in detail.
HTML5 Local Storage works on the principle of named key/value pairs, where you store information using a named key and retrieve it by calling that named key. Everything is stored locally on the user's PC; it cuts down the need to retrieve information from the server, thereby acting as a form of caching.
You may have noticed that we've used jQuery in this recipe—basic use of LocalStorage
(and SessionStorage
) doesn't necessarily need jQuery; you could use pure JavaScript if you prefer. It all depends on your requirements; if you are already using jQuery in your pages, for example, you may prefer to use this over JavaScript. (You will see I have used a mix of both throughout this book, to show you how you can use either jQuery or JavaScript).
In this recipe, we've used jQuery to reference LocalStorage
; if you take a look at the code, you will see two lines of particular importance:
var items = localStorage.getItem('myItems'),
localStorage.setItem('myItems', JSON.stringify(items));
These two handle the retrieval and setting of values respectively. In this demo, we begin with either fetching the contents of any existing stored information and inserting them into an array, or creating a new one, if nothing exists within the store. We then use JSON.stringify()
to convert information from the form into a string, push this into the storage, and then refresh the page so that you can see the updated list. To get the information back, we simply repeat the same steps, but in the reverse way.
The beauty of using JSON as part of storing information in this way is that you are not entirely limited to just plain text; you can store some other things in the LocalStorage
area, as we will see later in this book.
By now, you will start to see that using Local Storage works very much in the same way that cookies do—indeed some people often refer to Local Storage as "cookies on steroids". This said, there are still some limitations that you need to be aware of when using Local Storage, such as the following:
QUOTA_EXCEEDED_ERR
error is thrown. At the time of writing this book, there is no support built in for requesting more space. Some browsers such as Opera will allow the user to control each site's quota, but this is a purely user-based action.With careful use, we can take advantage of the ability to store relevant information on a user's PC, and avoid the need to push it back to the server. Once the information has been stored, there will be occasions when you will need to view the raw information from within your browser—this is easy enough to do, although the method varies from browser to browser, which we will see as part of the next recipe.