Using the Web Storage feature of HTML5 requires a bit of JavaScript, but overall is easy to use, once you learn it’s limits and capabilities.
Web Storage is kind of like a simple, NoSQL database. I say, “like a” because while it is very similar in some respects, it is also different in others.
Web storage was originally designed to be like cookies, but on steroids. First you can store larger amounts of data than a cookie would allow. The data is easier to work, especially as you get into larger amounts of data. Finally, unlike cookies, the data isn’t transmitted back and forth between the client and server with each request, so it speeds up the website.
Web Storage, is similar to cookies in that it is stored locally on the client side. However, this means that since data is local to that machine, if a user moves to a different machine, or even a different browser on the same machine, the data will be lost.
Also, since the data is local, it usually cannot get very large, and there are questions about it’s security since it is stored on the end user’s machine. Therefore, you don’t want to store sensitive data there. Now that very is a bit “relative”. Usually storage amounts are allowed up to 5MB (5 Mega Bytes), compared to 4KB (4 Kilo Bytes).
On a mobile device, the chances of the user using a different browser are slim, however they cannot move between a desktop and a mobile device. So if you need data stored by user, between devices, you need to find a way to handle that.
Another key factor to know when working with Web Storage, is that all data is stored as a string. So if you need to convert it to a number, you will need to use parseInt()
or parseFloat()
to do the conversion.
On the other hand, you can store session information, and information like a shopping cart, wish list, or even game scores for the user, all with web storage very easily.
Web Storage can be broken down into two main categories.
-
window.localStorage
– this data does not have an expiration date -
window.sessionStorage
– stores data for one session – when the browser, or browser tab, closes, the data is lost.
Now, all major current browsers support web storage. IE started in version 8
An Intro to Web Storage in HTML5 was originally found on Access 2 Learn