HTML 5 Web Storage is a big deal for any developer with even a hint of JavaScript know-how. It means client-side storage, and client-side storage means more performance and less server bandwidth and disk usage. The load is shared by the client (browser), and the client is happy to do it.
Sounds great, right? But what if that client browser doesn’t know this new trick?
HTML 5 Web Storage is, ready for this, part of the HTML 5 specification. Older browsers, namely IE 6 & 7, don’t follow the HTML 5 specification. It wasn’t complete at the time those browsers were released (at least the Web Storage module wasn’t).
So the question for us, as developers, becomes, “are we ready to give up on those old browsers?” The answer is subjective, and entirely depends on your application. If your app is designed for mobile browsers only, you can rest assured that Web Storage will be supported almost unanimously. If you’re developing a web app that requires widespread support across all clients, we might have a problem.
For many applications though, there’s a solution, one allows us to leverage client-side storage in older browsers to a certain extent. So, who’s the hero here? Cookies.
You may have been let down by that revelation, but in truth, objects stored in cookies aren’t a whole lot different than objects stored in web storage. They both only store string data. If we want to store an object, we need to serialize it, whether we’re using cookies or web storage.
The major differences are that cookies are limited in size (depending on the browser, you can get from 4k to 50k of storage and a limited number of keys, or cookies) and they are passed to the server in the header of each request. Imagine having to receive 50k of data in the header of each page request. So there’s a downside, but they can really come to the rescue when you are in need of a client-side storage solution that doesn’t require a large amount of storage.
The trick is to know when to use cookies and when to use web storage. JavaScript helps us there, by offering the typeof keyword. We can use it on the Storage object to determine if it exists. If it exists, we use web storage, if not, we use cookies.
Toss base 64 encoding into the mix, create a function for getting and setting data into storage, and you’ve got a complete, cross-browser client-side storage mechanism.
You’ve waited long enough, here are your functions:
var customStorage = {
storeObjectInStorage: function (key, value) {
var c = Base64.encode(JSON.stringify(value));
if (“undefined” !== typeof Storage)
localStorage.setItem(key, c);
else {
var b = new Date;
b.setTime(b.getTime() + 7776E6);
b = “; expires=” + b.toGMTString();
document.cookie = key + “=” + c + b
}
}
getObjectFromStorage: function (key) {
if (“undefined” !== typeof Storage) {
if (value = localStorage.getItem(key), “undefined” === typeof value|| null === value)
return {}
}
else if (value = getCookie(key), “undefined” === typeof key)
return {};
return JSON.parse(Base64.decode(value))
}
}
I’ve included a minified version of the Base64 function referenced in the code above here: https://www.sitekickr.com/coda/javascript/minified-base-encode-decode-functions.html