Recently I have done some research about HTML local storage and the offline functionality for websites in preparation for a project. In this article I want to share my experience with you. All of the content discussed in this article was tested in Google Chrome 27, Firefox 22, and Internet Explorer 10.
This article will only show some aspects. For more information and examples have a look at the literature listed beneath.
In the past native applications had some capabilities which were missing in the web area. One of this capabilities was to store data on the client. A solution for this problem was the usage of cookies. This solution introduced some problems, especially if you have security in mind. An alternative proposed by the World Wide Web Consortium (W3C) is called Web Storage. In this section I want to discuss some of the basics of one approach coming from the Web Storage proposal: local storage. Local storage, which is sometimes referred to as DOM Storage, is a simple persistent key-value storage directly in the browser. An important advantage of local storage is that it is natively implemented in browsers, which means that it is available even when external plug-ins are not.
Check the browser support
Let us start with a simple check if local storage is available in your browser:
After checking if local storage is supported we want to work with it. To demonstrate its capabilities I want to show you four things:
- Write a simple key-value pair to local storage
- Read a simple key-value pair from local storage
- Write a custom object to local storage
- Read a custom object to local storage
Before we start we should become familiar with the storage interface which is provided to us.
Like shown above we have two functions to work with, getItem and setItem. Like the name indicates with getItem and an appropriate key we can read a value from local storage. Writing into local storage is achieved with setItem, which needs a key and a value.
Write and read a simple key-value pair to/from local storage
Let us directly dive into the code for writing a key-value pair to local storage.
To check if our key-value pair is saved to local storage you can use the appropriate developer tools of your preferred browser. The following picture will show you how it will look like in Google Chrome.
There you see that I have typed Name as the key and Jan Hentschel as the value into the form.
After writing data to local storage we like to read it from local storage.
We have now seen how to work with simple key-value pairs. Now we come to something more complex, working with custom objects.
Write and read a custom object to/from local storage
Writing a custom object to local storage is similar to writing a simple key-value pair to it, but there is a small difference. In this example we want to write an address object to local storage. This object contains the street, the street number, and the city of a person. Let us have a look at the code.
If all works well we will see the following in the Google Chrome developer console.
Now it is time to get that data back from local storage. The code looks like the following.
We have covered a lot of ground in the first part of this article. Let me summarize what we have done
- We have checked if our browser support local storage
- We have written a simple key-value pair to local storage
- We retrieved this simple key-value pair from local storage
- We stored a custom address object to local storage
- We retrieved our custom object from local storage
This is just a starting point for working with local storage. Some things like error handling and reacting on storage events are missing. Also we have not talked about quotas. If you are interested in that I can highly recommend that you check the additional literature provided at the end of this article.
Working with local storage is just one part if you want to prepare a website for offline functionality. You also have to provide an offline experience for the user. That means your site should be available even if the user is not connected to a network. A common scenario for that is that your user is working on your site during a long train travel. If you have ever travelled through Germany by train, you will know what I mean. There are some regions where you are not connected to a network. A simple solution for taking your site offline is the cache manifest. For this approach you will only need to declare a simple file with the resources which should be cached for the user. How does a cache manifest look like? For our scenario I have declared a small one.
The only thing you need to declare is the manifest attribute on the html tag. The attribute takes the path to our manifest file as the value.
Using a cache manifest is a simple way to take your website offline. I have to admit that I had some problems with caching websites in Google Chrome. Even if I clear the cache the source of the site was not refreshed. It needs some patience, but at the end it worked.
One thing we have not covered it to check if the user is offline or online. I have not talked about this, because there is no solution which will work in every browser. The only browser where the sample worked was Internet Explorer, but IE does not implement this functionality like recommended by the W3C. To react on an online or offline event is currently a hard task and we have to wait if this will change in the future.
In this article we have talked about working with local storage and how to use a cache manifest. If you are interested you will find the complete source code on GitHub.
For more information about local storage and offline functionality have a look at the following sites.
- W3C – Web Storage
- The past, present & future of local storage for web applications
- Let’s take this offline
– Jan (@Horizon_Net)