Working with HTML5 local storage and use offline functionality

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.

Local Storage

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:

First we declare an area in which we can write into if our browser supports local storage or not (line 18). In our JavaScript we subscribe first to the load event and react on it with the checkStorageSupport function. It checks if local storage is available. If true it writes ‘Your browser supports local storage!’ to our span element. If not the message ‘Unfortunately your browser does not support local storage!’ will be displayed.

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.

In the HTML we define a simple form where the user can type into a key and a value. The key will be used as the storage key and the value as the storage value. In our JavaScript we first grab this two inputs and after that we save it into local storage with the provided setItem function.

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.

Developer Console

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.

What happens in this snippet? In our HTML we first define an area where the user can type in the key he wants to request (lines 20 and 21). On our submit button we will react on the click event which will call the JavaScript to read data from local storage. To display the retrieved value we define another area where we will output the value.
The JavaScript to retrieve the value is pretty simple. First we retrieve the key from the input and with the getItem function we read the value from the storage. After we have the value we write it to our output area.

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.

Like said, we have an address which contains a street, a street number, and a city. With respect to that we define our HTML which contains three inputs and a submit button. In our JavaScript we define a simple address object at the beginning. The goal now is to save this object as JSON to our local storage. To achieve that we first retrieve our three input values and then assign them to our object. At last we use the setItem function to write it to local storage. Notice that we use the JSON.stringify function to pass the object as JSON to local storage.

If all works well we will see the following in the Google Chrome developer console.

Write custom object

Now it is time to get that data back from local storage. The code looks like the following.

Similar to the other snippets we first define our HTML. The only things we need is a button the user can interact with and an area where we can write our output to. In our JavaScript we also have our address object from the last snippet. Reading a custom object is similar to reading a simple key-value pair, but remember that we have stored our object as JSON. To work with that JSON we use the JSON.parse function on our retrieved value and save this to our address object. After the assignment is done we write the output to the appropriate output area.

Summary

We have covered a lot of ground in the first part of this article. Let me summarize what we have done

  1. We have checked if our browser support local storage
  2. We have written a simple key-value pair to local storage
  3. We retrieved this simple key-value pair from local storage
  4. We stored a custom address object to local storage
  5. 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.

Offline functionality

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.

A cache manifest file start with a simple CACHE MANIFEST line. In the rest of the file you declare the files which should be cached. In this case we have two HTML, one JavaScript, and one CSS file. How can we connect this file with our application? Nothing simple as that.

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.

Summary

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.

Summary

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.

Literature

For more information about local storage and offline functionality have a look at the following sites.

– Jan (@Horizon_Net)

Advertisements

One thought on “Working with HTML5 local storage and use offline functionality

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s