HTML5 Tips and Tricks: Web Storage

HTML5 is the new web standard and features of it are increasingly being supported by all the major browsers.  A key feature of HTML5 is the ability to store data on the client.  This allows a website or app to be used offline and upload information when a connection is next available, for user preference data to remain client-side, as well to reduce bandwidth required to use the site by implementing client-side caching.  This Web Storage feature is available across all modern browsers, including IE 8+.

HTML5 Web Storage provides a localStorage and sessionStorage object accessible via javascript.  These objects use a simple key-value pairing to store string-based data. The amount of data allocated per site varies by browser but ranges from 5 to 10 MB per domain.  The localStorage object acts as a persistent data storage that retains data after the window or browser is closed. Data stored in the sessionStorage does not persist after the window has been closed and is compartmentalized from other windows – otherwise it functions the same as localStorage.

sessionStorage.setItem("key", "value");
var value = sessionStorage.getItem("key");

localStorage.setItem("key", "myValue");
localStorage.getItem("key");    // returns "myValue"
localStorage.length;            // is equal to 1 in this case
localStorage.key(0);            // gets value by index
localStorage.removeItem("key"); // removes the key-value pair from
                                // the storage dictionary
localStorage.clear();           // removes all key-value pairs

window.addEventListener("storage", function(event) {
// event.key, event.oldValue, event.newValue
});

localStorage.setItem("user", JSON.stringify( { user: "John", id: 1 } );
var user = JSON.parse(localStorage.getItem("user");

Figure 1 Simple examples of using HTML5 Web Storage objects.

Figure 1 gives some examples of the manipulations you can make on the data in the Web Storage objects.  An important thing to remember is that only string values can be stored, so more complex objects can be stored using the JSON.stringify() function and retrieved using the JSON.parse() function.  Additionally, event listeners can be attached to the storage objects allowing multiple windows using the localStorage object to stay in sync and prevent race conditions.

localStorage is a good solution replacing cooking, retaining data such as user preferences that remain client-side, keeping data past a page refresh, and allowing apps to be used offline.  sessionStorage is a good solution for things such as shopping carts, or sensitive data that should be disposed of after the session is complete.  With the widespread adoption across all browsers and a simple API, Web Storage is a valuable tool to be used in web site or app development.

Additional Resources

  1. http://www.w3schools.com/html/html5_webstorage.asp
  2. http://dev.w3.org/html5/webstorage/
  3. http://sixrevisions.com/html/introduction-web-storage/
  4. http://www.html5rocks.com/en/tutorials/offline/storage/
  5. http://paperkilledrock.com/2010/05/html5-localstorage-part-one/