With the new HTML5 reference there is an API defined for managing a so called Web Storage, which is broken down into two main parts, sessionStorage and localStorage. I will not cover sessionStorage now. The only difference between sessionStorage and localStorage is, that data from sessionStorage will go away when the browser is closed, while the data in the localStorage remains even after the browser has been closed.

This localStorage can be used by applications to store data locally, on the users’ machine. This storage can be used instead of cookies or in case of smaller web applications or SPAs this can store all the data necessary to run the app if there is no Internet connection. Once there is Internet connection, data can be synced back to the server as needed.

This localStorage API has some limitations. First, it can only store key/value pairs and both the key and the value has to be string. Another limitation is, that all the applications share the same space, so in case you are not aware, then you can override other app’s value and vice-versa. Although these limitations seem to be very serious using the localStorage can be more easy then implementing other things to store data locally.

To ensure that the key/value pairs from our application do not get mixed with the values from other applications, I created a simple JavaScript class, called LocalStorageWrapper. The code and the description for this wrapper is hosted on GitHub and it is open source.


Cancel Comment