(For more resources related to this topic, see here.)
For this article, all you need is your browser and favorite text editor.
How to do it…
Perform the following steps:
Let’s begin with creating a blank document in your text editor. Then, add the following code and save it as a test localdemo.html:
In between the <script> tags, add the following function. This copes with storing the information within the browser.
We need to add another function to retrieve information and refresh the content displayed on screen. So go ahead and update the script as highlighted:
We finish by adding a basic form—while the purists amongst you will notice that it doesn’t have all of the proper forms of tag, it is enough to illustrate how this demo works. Add the following code snippet, just above the closing </body> tag:
Enter item: <input type="text" id="item" /> <input type="button" value= "store" onclick="storeItem()" /> <br /> <ul></ul>
Crack open your browser and preview the results. Here’s a screenshot of what you should see, with some example values already entered:
How it works…
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.
In this article, 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’);
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:
Local Storage will only support text as a format and is set to a suggested arbitary limit of 5 MB, although this is inconsistent across browsers.
If you exceed this, the 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 userbased action.
Web Storage is no more secure than cookies; although use of the HTTPS protocol can resolve a lot of security issues, it is still up to you as a developer to ensure that sensitive information (such as passwords) is not sent to or stored locally on the client using Web Storage.
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 article.
In this article we discussed basic use of HTML5 Local Storage.
Resources for Article :
- Blocking versus Non blocking scripts [Article]
- Building HTML5 Pages from Scratch [Article]
- HTML5 Games Development: Using Local Storage to Store Game Data [Article]