Web Storage & Cookies

There are times when it may be best to save information for a user on the user's machine and not on the server.

  • A message can appear the first time a user visits a site, but not on subsiquent visits.
  • You want to retain information in a form that a user may have started filling out, but didn't finish.
  • Or if are making a small browser-based game that you want to keep a high score on.

There are primarily two ways of saving local information. Cookies, and Web Storage. Despite it's name, web storage refers to storing data locally. Let's compare the two.

Cookies are the technique that have dominated web design for many years. Here are a few defining properties of them...

  • Expire after a time, based on browser settings.
  • Traditionally use about 4k of space.
  • Does not require javascript (in which case they would be sent from the server).
  • Accessable by client and server (cookie info is sent alongside every http get and post).

The considerably less excitingly named "web storage" is the term applied to the specification for locally saved files introduced by HTML5. Web storage...

  • Can use between 10-15 MB, based on browser.
  • Must be cleared manually by web site or user command.
  • Requires javascript to be turned on.
  • Only accessable via client side scripts (and more secure for it).
  • Uses a "key" / "Value" dictionary structure (an associative array model).

Web storage may become the predominant form of saving information in the future, but for the time being cookies are perfectly acceptable to use.

First let's look at how to set up web storage, and then cookies later.

Web Storage

An important point to remember about web storage is that it can be divided into "session" and "local" storages. They are accessed as "sessionStorage" and "localStorage". The main difference is that "session" will only keep information for as long as the user is on that site, "local" will keep the information indefinitely.

The actually storage path is different for each platform and browser. Some examples are listed to the right.

Session Storage

Let's look at an example of this. You may wish to copy the code below to a text file to try out since you can't really see the effect of a storage object on a static page like this.



If you test out the above code, run it in a browser once, then delete or comment out the lines that set information. Then close the browser tab and reopen the file to see that the "localStorage" information persists while the "sessionStorage" information will not. You cannot simply hit the refresh button to test sessionStorage, it is not cleared until the browser tab is closed.

So as stated, web storage has no default way of setting an experation date and is dependent on the browser or user clearing out their storage data. What if we do want to remove data after a certain amount of time, should the user revisit the site after that time?

Expiring Web Storage

I said before that web storage "cookies" don't have expiration dates, which is true, but you can work around this by including a date in the information you save.



/*
Alongside a simple save action, include the current date and/or time.

If the user returns to the site after the given date, have the site script remove the storage.
*/

// A function to remove our stored items.
function delete_storage(name) {
    localStorage.removeItem(name);
    localStorage.removeItem(name+'_time');
}

function set_to_storage(name, value, expires) {

	// If we don't get an included time
    // limit perameter, include one.
	// (default of 1 day)
    if (expires==undefined || expires=='null'){ 
    	var expires = 86400; 
    } 

    var date = new Date();
    var schedule = Math.round(( date.setSeconds(date.getSeconds() + expires))
    / 1000);

    localStorage.setItem(name, value);
    localStorage.setItem(name+'_time', schedule);
}

// 
function storage_status(name) {

    var date = new Date();
    var current = Math.round(+date/1000);

    // Get Schedule
    var stored_time = localStorage.getItem(name+'_time');
    if (stored_time==undefined || stored_time=='null') { var stored_time = 0; }

    // Expired
    if (stored_time < current) {

        // Remove
        delete_storage(name);

        return 0;

    } else {

        return 1;
    }
}

// Status
var current_status = storage_status('cache_name');

// Has Data
if (current_status == 1) {

    // Get Cache
    var data = localStorage.getItem('cache_name');
    alert(data);

// Expired or Empty Cache
} else {

    // Get Data
    var data = 'Pay in cash :)';
    alert(data);

    // Set Cache (30 seconds)
    if (cache) { set_to_storage('cache_name', data, 30); }

}


If, for whatever reason, you need to locate the actual web storage files on your machine hard drive you can look in one of these possible locations.

Windows
Firefox user/appdata/Mozilla/Firefox/Profiles/xxxxxxx.default/webappsstore.sqlite
Chrome xxx
IE xxx
Mac
Firefox xxx
Chrome xxx
IE xxx

The above are only possible locations. Typically searching for ".sqlite" files will also help.

Cookies

Cookies: Taste great.

Browser cookies, how do we make the, where do they go, how much information can they store, are they illegal? Are they still used today, what are the pros and cons of cookies?

Actually on secoond though I'm not sure there's a point to these anymore.