Create
Learn
Share

Web Storage

rename
Updated 2010-09-30 18:31

Summary

Web Storage is the new alternative to cookies for web developers. It's a W3C stardard supported by all major browsers. It lets you store much more data than cookies and is signifcantly more efficient. Cookies bloat your page-load time, because they are reduntantly passed to every request, including images (use Firebug to look at the headers of images that are loaded and see for yourself).

 

This page is meant to help you learn and remember the important points about web storage, so you can decide whether they're a fit for you. For background info, read the Web Storage wikipedia page first (or afterward).

Basic facts

Question Answer
It's an alternative tocookies
Language (usually used to access Web Storage)Javascript
How to persist somethinglocalStorage["mykey"] = "myvalue";
How to read somethinglocalStorage["mykey"]
Synonym of Web StorageDOM Storage
memorize

Background

Question Answer
How much data you can store5MB (10MB in IE)
Browsers that support itFirefox 2+, IE 8+, Safari 4+, Chrome 4+
Stardard maintained byW3C (originally the html5 spec, but now separate)
Two optionslocalStorage and sessionStorage
localStoragepersistant and keyspace is per domain
sessionStoragenot persistant andkeyspace is per window
memorize

Differences with cookies

Question Answer
Cookies: client/server access?both client (javascript) and server can access it
Web Storage: client/server access?only client (javascript) can directly access it
Cookies: separate key namespace per window?no
Web Storage: separate key namespace per window?yes, with the sessionStorage option
Work-around to server accesssend values to server via an ajax call when appriate
memorize

Sources

http://en.wikipedia.org/wiki/Web_Storage
http://xiki.org/web_storage_example.html
http://www.w3.org/TR/webstorage/#the-storage-interface