Storage API

Web Storage

The Web Storage API are mechanisms implemented by browsers to provide ability to store key-value pairs.

Two storage types are provided: sessionStorage and localStorage, accessible through the window object as window.sessionStorage and window.localStorage.

Since both storage types implements the same Storage interface, they share same function calls.

sessionStorage

sessionStorage maintains a separate storage area per tab and per origin that's only available for the duration of the page session.

Whenever a document is loaded in a particular tab, a unique page session gets created and assigned to that particular tab.

The page session can only be accessed by the tab it's assigned to, and lasts until the tab/browser is closed (survises through reload and restore).

It's characteristics include:

Data is stored only for a session and will never be transferred to the server.
Stored data cannot be shared across tabs, even tabs share the same url.
Duplicating a tab copies the tab's sessionStorage into the new tab.
The keys and the values are always in the UTF-16 string format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.
Has a storage limit of 5mb.

Usage

// Save data to sessionStorage
sessionStorage.setItem("key", "value");

// Get saved data from sessionStorage
let data = sessionStorage.getItem("key");

// Remove saved data from sessionStorage
sessionStorage.removeItem("key");

// Remove all saved data from sessionStorage
sessionStorage.clear();

localStorage

localStorage maintains a separate storage area per given origin as well, but persists even when the browser is closed and reopened.

It's characteristics include:

Stores data with no expiration date, and gets cleared only through JavaScript, or clearing the Browser cache/Locally Stored Data.
Storage limit is the maximum amongst the two.
localStorage data for a document loaded in a "private browsing" or "incognito" session is cleared when the last "private" tab is closed.
The keys and the values are always in the UTF-16 string format, which uses two bytes per character. As with objects, integer keys are automatically converted to strings.
For documents loaded from file: URLs, the requirements for localStorage behavior are undefined and may vary among different browsers
localStorage data is specific to the protocol of the document. In particular, for a site loaded over HTTP (e.g., http://example.com), localStorage returns a different object than localStorage for the corresponding site loaded over HTTPS (e.g., https://example.com).
Has a storage limit of 5mb.gi

Usage

// Save data to localStorage
localStorage.setItem("key", "value");

// Get saved data from localStorage
let data = localStorage.getItem("key");

// Remove saved data from localStorage
localStorage.removeItem("key");

// Remove all saved data from localStorage
localStorage.clear();

Shared Storage

The Shared Storage API is a client-side storage mechanism that enables unpartitioned, cross-site data access while preserving privacy (i.e. without relying on tracking cookies).

IndexedDB API

IndexedDB is a low-level, JavaScript-based object-oriented transactional database system of significant amounts of structured data, including files/blobs.

It lets you store and retrieve objects that are indexed with a key; any objects supported by the structured clone algorithm can be stored.

One thing to note is that IndexedDB also abide by the same-orign policy.

Deep Dive

WHen is data evicted?

Data for an origin can be stored in two ways in a browser, persistent and best-effort:

Best-effort: This is the default behaviour that persists data as long as the origin is below its quota, the device has enough storage space, and the user doesn't choose to delete the data via their browser's settings.
Persistent: An opt-in behaviour where data stored this way is only evicted, or deleted, if the user chooses to, by using their browser's settings.

However, browser may evict data on multiple cases:

When the device is running low on storage space, also known as storage pressure, and is dealt with using Least Recently Used (LRU) policy. Persistent data is skipped.
When all of the data stored in the browser (across all origins) exceeds the total amount of space the browser is willing to use on the device.
Proactively, for origins that aren't used regularly (only in Safari)

Browser itself also might define a maximum storage space that they can use on the device's hard disk. For example, Chrome currently uses at most 80% of the total disk size. Once this limit is reached, data is evicted with best-effor eviction.

Deep dive into the web storage and quota concepts can be checked here.

Comparison

Property	Cookie	localStorage	sessionStorage
Initiator	Client or server. Server can use Set-Cookie header	Client	Client
Persistentence	As specified	Until deleted	Until session closed
Attached to http request	Yes	No	No
Total capacity (per domain)	4kb	5MB per origin	5MB per origin
Access	Across windows/tabs	Across windows/tabs	Same tab
Security	JavaScript cannot access HttpOnly cookies	None	None

Storage API

Web Storage​

sessionStorage​

localStorage​

Shared Storage​

IndexedDB API​

Deep Dive​

WHen is data evicted?​

Comparison​

References​