This post was written by Jeff Balogh. Jeff works on Mozilla’s web development team.
New in Firefox 3.5, localStorage is a part of the Web Storage specification. localStorage provides a simple Javascript API for persisting key-value pairs in the browser. It shouldn’t be confused with the SQL database storage proposal, which is a separate (and more contentious) part of the Web Storage spec. Key-value pairs could conceivably be stored in cookies, but you wouldn’t want to do that. Cookies are sent to the server with every request, presenting performance issues with large data sets and the potential for security problems, and you have to write your own interface for treating cookies like a database.
Here’s a small demo that stores the content of a textarea in localStorage. You can change the text, open a new tab, and find your updated content. Or you can restart the browser and your text will still be there.
The easiest way to use localStorage is to treat it like a regular object:
>>> localStorage.foo = 'bar' >>> localStorage.foo "bar" >>> localStorage.length 1 >>> localStorage[0] "foo" >>> localStorage['foo'] "bar" >>> delete localStorage['foo'] >>> localStorage.length 0 >>> localStorage.not_set null
There’s also a more wordy API for people who like that sort of thing:
>>> localStorage.clear() >>> localStorage.setItem('foo', 'bar') >>> localStorage.getItem('foo') "bar" >>> localStorage.key(0) "foo" >>> localStorage.removeItem('foo') >>> localStorage.length 0
If you want to have a localStorage database mapped to the current session, you can use sessionStorage. It has the same interface as localStorage, but the lifetime of sessionStorage is limited to the current browser window. You can follow links around the site in the same window and sessionStorage will be maintained (going to different sites is fine too), but once that window is closed the database will be deleted. localStorage is for long-term storage, as the w3c spec instructs browsers to consider the data “potentially user-critical”.
I was a tad disappointed when I found out that localStorage only supports storing strings, since I was hoping for something more structured. But with native JSON support it’s easy to create an object store on top of localStorage:
Storage.prototype.setObject = function(key, value) { this.setItem(key, JSON.stringify(value)); } Storage.prototype.getObject = function(key) { return JSON.parse(this.getItem(key)); }
localStorage databases are scoped to an HTML5 origin, basically the tuple (scheme, host, port). This means that the database is shared across all pages on the same domain, even concurrently by multiple browser tabs. However, a page connecting over http:// cannot see a database that was created during an https:// session.
localStorage and sessionStorage are supported by Firefox 3.5, Safari 4.0, and IE8. You can find more compatibility details on quirksmode.org, including more detail on the storage event.
Huh. I hadn’t thought of just stringifying/parsing JSON like that. And I bet with native JSON support, that goes pretty darned quickly, doesn’t it?
Awesome post.
I’ve been hacking localStorage for some time and it can completely replace sqlite if only it managed collections natively.
Right now we can save localStorage.user=”john”
It would be cool if we could also save localStorage.user[0] = “jane”
Right now we can not, but with an easy hack it can be done.
I’ve tested it with hundreds of records and it works fine.
Please consider handling collections in localStorage for firefox.next
Here, some tests with collections:
http://georgenava.googlepages.com/localstorage.html
Goodbye cookies! (I won’t miss you.)
Al, I don’t think this is going to replace cookies. Localstorage is exactly that, local. I don’t think it goes back to the server so you couldn’t use it for things like maintaining logins. You’d still need cookies for that. (Though, I guess you could send the localstorage data using XHR but why, when cookies do the job just fine and hold the same data?)
How can the user clear this data? AFAICS, clearing cookies or using the “clear recent history” don’t work…
Yay more crap on my harddrive. Cookies were bad enough.
“I don’t think this is going to replace cookies”
Nope, esp. as the linked QuirksMode blog post is full of ‘browser X does Y, but browser A does B, browser W only tells you K’ etc. etc.
IE8: Storage.prototype does not work
Storage.prototype.setObject = function(key, value) {
this.setItem(key, JSON.stringify(value));
}
Storage.prototype.getObject = function(key) {
return JSON.parse(this.getItem(key));
}
It’s even possible to store images in localStorage by combining the use of drawImage and toDataUrl of a canvas.
There is however a limit size to any localStorage.