Offline Storage

There were several iterations of prototypes and standardized technologies for offline storage capabilities for web applications. First attempts were either just hacky workarounds (like to store data in cookies) or required additional software (like Flash or Google Gears). Later, Web SQL idea, basically to include SQLite natively within a browser, was coined and implemented throughout some browsers, but deprecated later due to the standardization difficulties.

Right now there are two distinct and independent technologies standardized and available - simpler Web Storage and more sophisticated IndexedDB. Web Storage is a key-value string storage, allowing web applications to store data either persistently and cross-window (localStorage) or for a single session in a single browser tab (sessionStorage). IndexedDB is a low-level API over database-like structures with transactions and cursors iterating by indexes.

Live example, API glimpse and usage data shown here are referring to Web Storage engine. For details on IndexedDB, refer to caniuse.com.

API glimpse

window.sessionStorage
Gives an access to the Web Storage engine with per-session objects lifetime.
window.localStorage
Gives an access to the Web Storage engine with persistent objects lifetime.
storage.setItem(key, value)
Saves the value string under the key in the selected storage engine.
storage.getItem(key)
Returns the string value stored under the key in the selected storage engine.
storage.removeItem(key)
Removes the string value stored under the key from the selected storage engine.
storage.clear()
Removes all the string values stored in the selected storage engine.
window.addEventListener('storage', listener)
An event fired when the data stored in either sessionStorage or localStorage has been changed externally.

Resources