The HTML5 Family: Web Storage
We're going to be blogging about next generation web technologies for the next few weeks, as well as how they fit into an AJAX framework like Ext JS. We started with an overview of HTML5 (and the use and mis-use of the term). Now we'll dig into one of the easier and smaller pieces: Web Storage.Two of the new APIs defined in HTML5 provide storage capabilities in the user's browser. Browser storage is nothing new—cookies have been around since 1994 and have long been used to save small amounts of data to be passed between a server and client. Cookies have a few problems however:
- They can never be more than 4kb in size
- Different browsers allow a different number of cookies to be created per domain - modern browsers should cater for 300 cookies but older browsers such as IE7 allow far fewer
- Cookies are transmitted to the server on every request. Because modern internet connections are heavily asymmetric, upload is typically far slower than download and this extra weight can quickly add up
The HTML5 WayHTML5 provides two new objects in which data can be stored: localStorage and sessionStorage. Collectively these are known as Web Storage. The API for each object is identical, but their long term persistence is different. Any data saved to localStorage persists across browser sessions and is available whether the user closes and reopens a window, restarts their browser or even restarts their computer altogether. sessionStorage is more transient - it persists while a user navigates between pages in a single browser window, but is lost as soon as that window is closed. sessionStorage data is not shared with other windows, but if a window with sessionStorage opens another window, the sessionStorage data is copied into the new window. Browsers implement a limit to the amount of data that can be stored in each object - the W3C recommends an initial limit of 5 megabytes per origin, though they recognise the arbitrary nature of that limitation. At this time, browsers handle this limitation differently - for example iPhone will ask the user if they wish to increase the limit to 10 megabytes. For the time being, storing more than 5Mb in either of these objects should be considered risky. Web Storage is currently supported across most modern browsers, though support for the sessionStorage and localStorage objects can vary. localStorage is supported by Chrome 5, Firefox 3.6, Safari 4, Opera 10.5 and IE8. sessionStorage is not supported in older versions of Chrome, but is in older versions of Firefox. It's worth consulting a good comparison chart before deciding on whether or not to use these objects in your application.
A Quick ExampleAs the API for each object is identical, this example applies equally well to either. Here we are going to use the slightly more useful localStorage. Let's say we've written a blog authoring tool and would like to save the user's progress while they create their masterpiece. We extracted the data from a form and now wish to save it for later retrieval:
Setting data on these storage objects is extremely simple - we just provide a string for the key and a string for the value. Importantly, we can only store strings in Web Storage - any JSON objects must be serialised on the way in and deserialised on the way out. Retrieving our data is equally simple:localStorage.setItem("title", "My blog title"); localStorage.setItem("body", "This will be the best blog post evar!!!1");
In the meantime, the user could have closed the window or their browser, or come back days later - our application will still work as though it was all done in a single session. Web Storage provides a simple way to clear up after we're done:var title = localStorage.getItem("title"); var body = localStorage.getItem("body");
Be careful when clearing localStorage data. Although different domains are given different localStorage objects (i.e. you can't clear another domain's localStorage), it is possible that more than one script is using localStorage on the same domain so it is better to remove your data more selectively:localStorage.clear();
And that's it for Web Storage — one of the simpler technologies in the HTML5 family.
The HTML5 Family
Our continuing coverage of the many technologies which make up what people refer to as “HTML5”, we call The HTML5 Family. See all our published posts here: