Cookies vs. Web Storage

Cookies

HTTP cookies are small pieces of data stored in a user's browser by a specific web site. When that web site is reloaded, the cookies are sent back to the server with each request. Cookies contain a name-value pair, an expiry date, and the domain and path of the server they should be sent to.

To access a page's cookies via JavaScript, use document.cookie. For more information on how to do this, refer to this page.

In ASP, cookies can be created with Response.Cookies and retrieved with Request.Cookies.

Web Storage

Web Storage was introduced with the HTML5 standard. Web Storage is a means of persisting client-side-only data on web sites. Unlike cookies, this data is not automatically sent to the server. Web Storage provides far more capacity than cookies: 5 or 10 MB per origin (depending on the browser) versus cookies' 4 KB. Web Storage comes in two flavors: Local Storage and Session Storage.

Local Storage

Like cookies, Local Storage can retain data between sessions. Unlike cookies, this data does not have an expiration date. This data can be accessed using window.localStorage, as illustrated by the example below.

window.localStorage.setItem("username", "jsmith");
var user = window.localStorage.getItem("username");
window.localStorage.removeItem("username");
window.localStorage.clear(); //clear all items

Session Storage

Session Storage works just like Local Storage, with one key difference: all data expires at the end of the current session (i.e. when the window is closed). Session Storage works just like the examples in the previous section... just replace window.localStorage with window.sessionStorage.

Other Options

Here are some lesser-known alternatives to using Cookies or Web Storage.

Web SQL

Web SQL is an API that can be used to store data in a local relational database. Web SQL is largely considered deprecated, as the W3C ceased work on the specification in November 2010. Web SQL is not supported by IE or Firefox. It is supported by Chrome, Opera, Safari, and the native browsers in Android and iOS. Those browsers that do support it use SQLite as the storage engine.

IndexedDB

The Indexed Database API (or IndexedDB) is an API that can be used to store data in a Key-Value database. IndexedDB is currently supported by Chrome, Firefox, and IE10+. Apple has announced support for future versions of Safari.