Categories

About me

Hey hey, my name's Jens Lübberstedt, I'm a Web-Developer from Germany. Having lived and worked in Denver (USA), Trivandrum (India) and Omurushaka (Tanzania) I'm now back in Germany and based in Hamburg.
I am working with and blogging about all the fun web stuff such as JS, HTML/CSS, PHP, Linux and more...

DOM Storage – The new super cookie you have dreamed of

Cookies are a nice way of storing any kind of data on your visitor’s machine you consider to be important during a session or for future visits. But nonetheless there are a couple of problems with cookies. First of all, cookies are limited to a maximum of 4kb. That isn’t too much if you consider storing more info than just a simple session id. Next, it is very easy to delete cookies for your visitors. From the visitors who are not having cookies already disabled by default, there will surely be a couple of them that delete cookies manually once in a while. That isn’t a very tough job to do with today’s browsers and nowadays even the “usual” everyday web user is aware of the fact that data is stored in cookies on his machine.
But as new technologies rise, there are also new possibilities. And in this case the new technology is called HTML5, whereas the new possibility is called DOM (or web) storage. Initially part of the HTML5 specification it is now a specification on its own. Now what is DOM storage and what makes it so awesome?
To begin with, DOM storage is basically a very simple way to store key/value pairs. Storing, retrieving and deleting data can be achieved via Javascript by either using the localStorage or the sessionStorage object. The basic difference between these two is the lifetime of the data stored. As you might already guess sessionStorage saves data only for as long as a session lasts (e.g. as long as you don’t close you browser), while localStorage saves data persistently beyond the session. But the really awesome fact is that DOM storage allows you to store 5-10 MB (depending on your visitor’s browser) per domain and even though it is a relatively new feature, DOM storage is already quite popular amongst the most common browsers. It is supported onwards from Firefox 2, Internet Explorer 8, Safari 4, Chrome 4 and Opera 10.5. In addition, removal of DOM storage entries isn’t as easy as it is with normal cookies. The “delete all cookies”-button usually won’t help in today’s browsers, although it definitely is possible to clear the DOM storage (e.g. for Firefox). Another and much easier way for Firefox is the extension BetterPrivacy.
But now enough of talking, lets get to the point and do a simple set and get:

// Set a session_id if sessionStorage object is availableif(window.sessionStorage){var session_id ="2bf039d0-f0c1-11df-ae7e-3137382e3633";
window.sessionStorage.setItem("session_id", session_id);}// Try to retrieve the user_id if localStorage object is available // or set a new user_id if user_id isn't set yetif(window.localStorage){var user_id = window.localStorage.getItem("user_id");if(!user_id){
user_id ="6b67ce02-c61e-11df-96b2-38352e313833";
window.localStorage.setItem("user_id", user_id);}}

As you can see, setting and getting DOM storage key/value pairs is done very easily. There are also a couple more methods and properties to the DOM storage API. You may want to find out about these in this article, which covers the whole topic in more detail.