HTML5 LocalStorage

This article presents the HTML5 LocalStorage (and SessionStorage) objects and discusses some security implcations and recommendations. Furthermore JavaScript examples are given on how HTML5 can be easily used.

What is HTML5 Web Storage or LocalStorage?

With HTML5, web pages can store data locally within the user's browser.
Earlier, this was done with cookies. However, Web Storage is more secure and faster:

  • The data is not included with every server request, but used ONLY when asked for.
  • It is also possible to store large amounts of data (up to 10 MB), without affecting the website's performance.
  • The data is stored in key/value pairs.
  • A web page can only access data stored by itself.

Caution: everything you store in the LocalStorage is kept forever until the user clears his cache (or unless the user is browsing in "Private mode"). If you only need to store data during a certain session, the use SessionStorage instead of LocalStorage. The sessionStorage object is equal to the localStorage object, except that it stores the data for only one session. The data is deleted when the user closes the browser window.

Tip: this only works in Internet Explorer if your code is loaded from a webserver. It doesn't work in Internet Explorer if you load the file from your filesystem!

Security implications / recommendations

  1. LocalStorage is not Secure Storage! Data in LocalStorage is saved in the browser's cache and is therefore accessible to the (malicious) user.
  2. A cross-site scripting vulnerability can read everything in LocalStorage: the data is meant to be accessed by JavaScript code, so bad JavaScript code also has access to it.
  3. A cross-site scripting vulnerability can modify everything in LocalStorage: don't trust the data stored in the LocalStorage.
  4. The data stored in the LocalStorage is accessible to every page in a certain domain. Different authors sharing one host name, for example users hosting content on geocities.com, all share one local storage object. There is no feature to restrict the access by pathname. Authors on shared hosts are therefore recommended to avoid using these features, as it would be trivial for other authors to read the data and overwrite it.
  5. Someone with access to the machine has access to all information in LocalStorage:
    • either by looking at the data using a browser:
      • Chrome: open the Developer Tools using Ctrl-Shift-I or via the Menu --> Tools --> Developer Tools, select Resources, select LocalStorage
      • Firefox: install the FireBug extension and use FireBug's console to get the data stored in LocalStorage
    • either by accessing it through the FileSystem:
  6. When using date from LocalStorage, do strict input validation: the data may have been modified by someone/something.
  7. Don't use LocalStorage to store session identifiers, but keep using cookies. At least cookies can be additionally secured using the HTTPOnly and Secure flags.

Check if LocalStorage is supported

Use the following function. It returns True or False depending on whether LocalStorage is supported or not.
function supports_html5_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}

Save a value in the LocalStorage

Simple:
localStorage["strMyKey"] = "My value";

Obtain a value from the LocalStorage

Again simple:
var strMyValue = localStorage["strMyKey"];
If the key you are using doesn't exist in the localStorage array, then "undefined" is returned.

Showing all items in the LocalStorage

Using the length attribute, you can find out how many elements are stored in the LocalStorage. Then use a for-loop to iterate over all elements:
var elements = localStorage.length;
document.write("There are currently " + elements + " elements in local storage:

    ");
    // Display all elements in the local storage.
    for (i = 0; i document.write("
  • " + localStorage.key(i) + " = " + localStorage[localStorage.key(i)] + "

    • ");
    }
    document.write("

");

Remove an element from the LocalStorage

localStorage.removeItem("strMyKey");

Remove all elements from the LocalStorage

localStorage.clear();

References

Tags: 

You might also be interested in...