Way back in the day when Internet Explorer was the King of the Internet (unofficial title), it came out with a novel idea to allow webpages to store 64kb worth of data. With many things that IE came out with, later technologies came along and did it better. These days, we have HTML5 Storage also called Local Storage, HTML5 Web Storage and DOM Storage. What on earth is it and why is it useful in a web design perspective?
Why is it So Great?
Databases often store data components in what are called key/value pairs. What this means is you have a key which is used to identify values within a database. If I were to knock this down a few more rungs of complexity, a key can be considered a keyword which is used to identify some kind of data or value. That might be oversimplifying it a bit, but it’s as accurate as I can get without being too abstract.
Now, the value of a database on a website is huge, you can store all manner of things in a database which will then allow you to do even more things with a website such as allow user accounts, store user information, store company information, run a store and so on. Web Storage wasn’t really meant to replace the full on databases that tend to drive complex websites, but it does make some neat things possible.
For one thing, Web Storage keeps this data in your browser because it allows your web browser to hold onto it, even if you close your browser or move away from the page. This is an improvement over how things used to be done, which is when browsers would store this type of information in cookies. A lot of things can happen to cookies between the time a website stores information into a cookie and a user reopens their browser. Many people now set their browsers to clear all cookies when its closed. Others disallow cookies altogether. Another benefit is the information is never sent to the server and the storage capacity of 64kb has been increased to allow for larger chunks of data. Web Storage is earmarked per domain. That means that each domain is allowed to store a certain amount of HTML5 Storage data.
A bonus to Web Storage is that it’s supported by practically all major, modern browsers. Check out the caniuse.com page for more: Can I Use Web Storage?
What’s It For?
I guess it wouldn’t be helpful to just say, “a ton of stuff”. But what Web Storage allows you to do is detect and keep a small amount of information per user without worrying about storing that data on your server. It’s kept with the user for your domain and you don’t have to worry about client to server interactions as much.For example, you can use this as a way to allow users to set preferences on your website without requiring they sign up and have an account on your site. That way, you can offer some features that they can set such as a preferred language, currency or style. That preference will then be stored in their web browser using web storage and recalled the next time your user visits the site. All this without requiring they have an account to send, store or pull data from the server.
Ultimately, it’s about storing things without relying on cookies. Cookies have been known to be exploited before by Cross-Browser scripts, they can be cleared and removed very easily by the user, some users don’t accept them at all, they can’t keep very complex data, and their size is limited.
What’s In It?
Web Storage has two major methods, localStorage and sessionStorage. The difference between them is that localStorage does not expire and will share the data across all open windows and tabs and sessionStorage does expire after a session ends and only maintains data within the tab it was opened in.
In other words, when you close the window, exit out of the browser, etc. localStorage will keep the data and sessionStorage will release it.
Testing Web Storage
Simple, straightforward and to the point. You can test for Web Storage using this snippet of code:
if (localStorage) {
// localStorage is supported.
} else {
// localStorage is NOT supported.
}
Then there’s following code, which is derived from W3C and Microsoft documentation, and it works as a test case to determine if Web Storage is a) supported by your browser, and b) working properly. It’s also a great way to get a grasp of how web storage’s localStorage works. Go ahead and set up your HTML like so:
<p> You have viewed this page <span id="count">many</span> time(s). </p>
We’re using a span with an ID of “count” because we’re going to check for Web Storage using Javascript. Now, because we’re using Javascript, don’t forget to include the link for the JS file in your HTML, or at least make sure you embed the scripts. I’m using an external file because it’s just good practice:
<script src="storage.js"></script>
Within your storage.js file or in your scripts area in HTML, enter the following:
if (!localStorage.visitCount)
localStorage.visitCount = 0;
localStorage.visitCount = parseInt(localStorage.visitCount) + 1;
document.getElementById('count').textContent = localStorage.visitCount;
What we’re doing above is creating and instantiating visitCount with localStorage and set its initial value to 0. As users keep viewing the page, we iterate visitCount by 1 for each visit. Then we get the count ID element and output the localStorage.visitCount value onto the page.
Storing and Retrieving Data
Let’s do something a little more useful with web storage. I’m going to store a key/value pair and then recall it. Here’s my HTML:
<p>I heard <span id="person">Joe Smith</span> bedazzles their jeans on the weekends.</p>
We’re going to be reaching into that person ID and swapping it out with another value that we’ve set in sessionStorage. Here’s my JS:
sessionStorage.setItem('name', 'Jane Roberts');
var item = sessionStorage.getItem('name');
document.getElementById('person').textContent = item;
If things work out, you should be seeing your HTML page gossiping about Jane Roberts instead of Joe Smith. This becomes more useful when you pair localStorage or sessionStorage with user inputs. For example, you can ask the user to fill out their name then store it using Web Storage so every time they visit your website, they will be greeted personally.
Now, there’s a lot of security things that I’m actually a little worried about when it comes to Web Storage. Few people seem to be mentioning it at the moment, but like all web components that are interactive and store data, we should be aware that if something exists with even the slightest possibility of being used for malicious intent, someone will use it for that purpose. Smashing Magazine actually pointed me toward Evercookie, a really interesting piece that highlights some of the security concerns surrounding the storage of data.
Resources
Web Storage (Second Edition) W3C
Dive Into HTML5, Web Storage
Web Storage on Dev.Opera
MDN Web Storage Documentation
Smashing Magazine Local Storage
Bedazzling is cool.