Subscribe / Unsubscribe Enewsletters | Login | Register

Pencil Banner

4 client-side web storage options that replace cookies

Chris Minnick and Ed Tittel | Sept. 4, 2013
Several standards exist for storing large amounts of data in a user's Web browser. Each has its benefits, tradeoffs, W3C standardization status and level of browser support. All are better than cookies.

Web Storage provides four primary methods — getItem(key); setItem(key,value); removeItem(key); and clear().

But...: Web Storage Loophole Can Be Abused to Fill Hard Disks With Junk Data

Lastly, Web Storage includes of two different types of storage: SessionStorage and LocalStorage.

SessionStorage limits the scope of data saved in the current browser window to just that browser window. When used with an ecommerce application, for example, using sessionStorage to record the contents of a user's shopping cart eliminates the potential for accidental double purchases.

LocalStorage, meanwhile, persists across windows and tabs within a single browser. So, if you have the same site open in three windows in Chrome, all could all share the same localStorage container. If you have three different sites at different domains open, each one needs its own container. Likewise, if you have the same site open in different browsers, each browser needs its own container, since they don't share a common runtime context.

To set a new key-value pair then retrieve it, you could use the following JavaScript:

//first set firstname equal to Sparky.

localStorage.setItem( "firstname", "Sparky" );

//next, get the value of firstname (hint, it will be Sparky).

localStorage.getItem( "firstname" );

The Web Storage API reached W3C Recommendation status in summer 2013. Going forward, Web Storage can pretty much be used anywhere you would normally have used cookies.

News: W3C's Web Storage Technology Goes Live
But Web Storage is also capable of much more. If your data sets aren't enormous, Web Storage provides what's perhaps the simplest way — even easier than cookies — to set and retrieve key-value pairs in a browser.

IndexedDB: Searchable, and Without File Size Limits

Indexed Database is an API for storing and retrieving data using an indexed, transactional database of key-value pairs on the user's computer. IndexedDB provides faster, more sophisticated data storage and retrieval than simple key-value pair storage of the type available from Web Storage or cookies.

The IndexedDB API, like Web Storage, took a major step forward in the Web standards process this summer, becoming a W3C candidate recommendation in July 2013.

IndexedDB offers four specific benefits over Web Storage:

  • Indexed data can be searched efficiently.
  • Databases allow multiple values to be stored as a key, whereas key-value data requires every key to be unique.
  • Transactional databases offer some protection against system and application failures. If a transaction doesn't successfully complete, it can be rolled back.
  • IndexedDB databases impose no size limitations. In Firefox, the browser will ask for permission to expand a database beyond 50MB, but the sky's the limit (actually, the volume or disk drive's the limit) for storing data in IndexedDB.


Previous Page  1  2  3  4  5  Next Page 

Sign up for CIO Asia eNewsletters.