Web storage API overview
Video: Web storage API overviewIf you are building a web site and you want to keep track of who is logged in or what their favorite song is or how many widgets they've bought from you in the last month, your options are actually pretty limited. Currently you can either create a more robust server-side application, which places the burden of storing this data on the server, or you can take advantage of cookies, which allow you to store small amounts of data on a client machine. The new Web Storage API gives you a third option, and when fully implemented will make it easier to create more robust applications without placing the strain of data storage on the server.
Viewers: in countries Watching now:
In HTML5 First Look, author James Williamson introduces the newest HTML specification, providing a high-level overview of HTML5 in its current state, how it differs from HTML 4, the current level of support in various browsers and mobile devices, and how the specification might evolve in the future. Exercise files accompany the course.
- Understanding the history of HTML5
- Using new tags
- Understanding HTML5 semantics
- Coding ID and class attributes in HTML5
- Structuring documents
- Building forms
- Exploring HTML5 native APIs
- Encoding and adding HTML5 video
- Exploring associated technologies such as CSS3
Web storage API overview
If you are building a web site and you want to keep track of who is logged in or what their favorite song is or how many widgets they've bought from you in the last month, your options are actually pretty limited. Currently you can either create a more robust server-side application, which places the burden of storing this data on the server, or you can take advantage of cookies, which allow you to store small amounts of data on a client machine. The new Web Storage API gives you a third option, and when fully implemented will make it easier to create more robust applications without placing the strain of data storage on the server.
Before we get into the Web Storage API, let's talk a little about the current methods and their strengths and weaknesses. Cookies have been around for a long time and they are widely used to store small key value pairs on the client's machine. While extremely useful, they can only store small amounts of data, they are limited to 4 KB, and they are sent with each HTTP request. Meaning the same data is sent over and over again which can slow down your application. For a more robust solution, you can build a server-side application that uses databases or other means of persistent data storage.
Now that's great for larger applications or instances where complex databases are required, but it's certainly not always the best solution. Storing data locally is faster. It requires less load on the server and can create a more seamless user experience by eliminating the need for logging in or manually retrieving that information. So, the problem for the most part has been in finding a way to store large amounts of data on the local client that doesn't require server calls and can be written to and accessed whenever needed.
That's where the new Web Storage API comes in. Originally a part of the HTML5 specification, the Web Storage API has been split out now and can be found on its own spec on the W3C. Like cookies, the Web Storage API is designed to store data in named key/value pairs. However unlike cookies, Web Storage is designed to address two specific areas of data storage. Session storage and local storage. The session storage mechanism controls storing data for a single session in a single window.
Local storage on the other hand controls data that's accessible over multiple windows and that persists for longer than a single session. The web storage API also allows you to store considerably more data than cookies. With web storage allowing you to store an average of 5 MB based on some user agent implementation. Okay, so how do we use web storage? Well, every storage object created stores data as a list of key/value pairs. Now keys are stored as strings and although the spec states that the values can be any data type required, in reality they are stored as strings as well, so you are going to need to use conversion functions when retrieving values other than strings.
Using storage objects is actually pretty simple, you can either declare a local storage or session storage object, depending on which one you need, and then you can assign key value pairs by directly setting values as shown right here or you can use the setItem method shown here. You can also use methods to remove items, return the length of the key/value pairs in the object, specify a pair by its key index value, and one that clears the entire object of all current key/value pairs.
There is also a Storage event, which allows you to assign event listeners and respond to any changes to store data. The Storage event is fired on the window object whenever a change to the storage object occurs, and allows you to track the storage object affected, the name of the key that's been changed, the previous value of the key, the new value of the key, and the page which triggered the change. Now at the moment implementing web storage can be a bit tricky.
Although it enjoys fairly wide browser support and as you can see here it's supported by a version of almost all major browsers, now implementation can vary and trying to tie a local storage in with existing scripts can be a bit of a chore. It's also worth noting that most browsers are setting a limit of 5 MB of storage space and currently there are no mechanisms for either extending or requesting permission to increase that amount. If you want to get started with using web storage now, I recommend using Modernizr to detect web storage support and you may want to consider using jStorage.
When fully implemented, Web Storage will give developers an entirely new set of tools to assist and building applications. If you are frustrated by the limitations of cookies but need something other than a server-side solution for storing and retrieving data, Web Storage is for you.
There are currently no FAQs about HTML5 First Look.