How to store website data with HTML5

html5-storage

How to store website data with HTML5

Throughout your web browsing careers I’m sure you’ve come across the notion of cookies, pieces of text stored by the browser to be retrieved and used at a later date. These vary from simply remembering your name to welcome you personally next time you visit, to more complicated storage of authentication and shopping-cart contents.

Cookies generally work well but can be fiddly to implement, as they are set to be deleted by default once the browser is closed. If a website owner needs the data to be stored for a longer period, a cookie can be given an expiry date. Again this isn’t as clean as it could be: how far into the future do you set the date, for example? And what happens when a user flushes out their cookies?

HTML5 attempts to clean this up with the introduction of web storage.

Web Storage

Web storage comes in two different types, sessionStorage and localStorage. As might be deduced from the names, sessionStorage is for storing data that’s required for a particular session only, and localStorage is for data that’s to remain indefinitely.

Web storage correctly separates session data from long term data

This does away with the need for expiry dates, and instantly makes it clearer which data is for when and for how long. It also makes it incredibly easy to implement.

The API

As both types are so similiar, they share the same API, which contains the following items and functions:

// The number of items being stored
long length;

// To retrieve the item 'key' from storage
getItem(key);

// To set the item 'key' in storage with 'value'
setItem(key, value);

// To remove the item from storage
removeItem(key);

// To clear the entire storage
clear();

It’s all quite simple and straightforward to use.

Saying Hello

Let’s say you wanted to store a user’s name to welcome them back later. Assuming the existence of a simple HTML5 page consisting of one input field called name and a link that calls the function saveName() it would be defined as follows:

function saveName() {
   var name = document.getElementById('name').value;
   localStorage.setItem('username', name);
}

Each time this page loads, call a new function sayHello() which is defined as:

function sayHello() {
   var userName = localStorage.getItem('username');
   if (userName != null) alert("Hello " + userName + " and welcome back!");
}

This will check for the existence of a username in localStorage, and if it’s there, will welcome the user.

Note that localStorage is used here rather than sessionStorage as we want the name to be displayed next time the user visits the page again, during which time they may have closed the browser, which would clear anything in sessionStorage.

You can see this working for yourself in this very simple “say hello” example. Enter a name, click ‘save’, and reload the page.

If you enter a different name in the input field and click ‘save’, the existing value will be overwritten. We could also remove the item by calling localStorage.removeItem('name'); which would remove that item only. The entire localStorage could be cleared by calling localStorage.clear();

Session storage

sessionStorage works in the exact same way, except that the data will be automatically cleared once the brower is closed.

You can also store multiple data items in web storage attached to the one key, but you will need to use a JavaScript object and something such as JSON which helps to “stringify” the stored data, thus facilitating its storage.

Browser Support

If you’re used to reading about Internet Explorer’s current inability to support any HTML5 feature, you’re in for a surprise here. Web storage is actually supported by IE8 as well as all the major browsers:

  • Firefox 3.5+
  • Safari 4.0+
  • Chrome 4.0+
  • Opera 10.5+
  • Internet Explorer 8.0+
  • iPhone 2.0+
  • Android 2.0+

So basically, you can start using it now!

Disclaimer: Some pages on this site may include an affiliate link. This does not effect our editorial in any way.

Todays Highlights
How to See Google Search History
how to download photos from google photos