Web storage · Lablypedia

Features

Web storage differs from cookies in some key ways.

Purpose

Cookies are intended for communication with servers; they are automatically added to all requests and can be accessed by both the server and client-side. Web storage falls exclusively under the purview of client-side scripting. Web storage data is not automatically transmitted to the server in every HTTP request, and a web server can't directly write to Web storage. However, either of these effects can be achieved with explicit client-side scripts, allowing for fine-tuning the server's desired interaction.

Storage size

Cookies are restricted to 4 kilobytes. Web storage provides far greater storage capacity:

Opera 10.50+ allows 5 MB
Safari 8 allows 5 MB
Firefox allows 10 MB (formerly 5 MB per origin in 2007)
Google Chrome allows 10 MB per origin (formerly 5 MB per origin)
Internet Explorer allows 10 MB per storage area

Local and session storage

Web storage offers two different storage areas—local storage and session storage—which differ in scope and lifetime. Data placed in local storage is per origin—the combination of protocol, host name, and port number as defined in the same-origin policy. The data is available to all scripts loaded from pages from the same origin that previously stored the data and persists after the browser is closed. As such, Web storage does not suffer from cookie Weak Integrity and Weak Confidentiality issues, described in RFC 6265 sections 8.5 and 8.6. Session storage is both per-origin and per-instance (per-window or per-tab) and is limited to the lifetime of the instance. Session storage is intended to allow separate instances of the same web app to run in different windows without interfering with each other, a use case that is not well supported by cookies.

Interface and data model

Web storage provides a better programmatic interface than cookies because it exposes an associative array data model where the keys and values are both strings.

3 more chapters are free with a Lably account.

Usage

Browsers that support web storage have the global objects sessionStorage and localStorage declared at the window level. The following JavaScript code can be used on these browsers to trigger web storage behavior:

<span id="mwZQ"></span><span class="c1" id="mwZg">// Store value on browser for duration of the session</span> <span class="nx" id="mwZw">sessionStorage</span><span class="p" id="mwaA">.</span><span class="nx" id="mwaQ">setItem</span><span class="p" id="mwag">(</span><span class="s2" id="mwaw">"key"</span><span class="p" id="mwbA">,</span><span class="w" id="mwbQ"> </span><span class="s2" id="mwbg">"value"</span><span class="p" id="mwbw">);</span> <span class="c1" id="mwcA">// Retrieve value (gets deleted when browser is closed and re-opened) ...</span> <span class="nx" id="mwcQ">alert</span><span class="p" id="mwcg">(</span><span class="nx" id="mwcw">sessionStorage</span><span class="p" id="mwdA">.</span><span class="nx" id="mwdQ">getItem</span><span class="p" id="mwdg">(</span><span class="s2" id="mwdw">"key"</span><span class="p" id="mweA">));</span> <span class="c1" id="mweQ">// Store value on the browser beyond the duration of the session</span> <span class="nx" id="mweg">localStorage</span><span class="p" id="mwew">.</span><span class="nx" id="mwfA">setItem</span><span class="p" id="mwfQ">(</span><span class="s2" id="mwfg">"key"</span><span class="p" id="mwfw">,</span><span class="w" id="mwgA"> </span><span class="s2" id="mwgQ">"value"</span><span class="p" id="mwgg">);</span> <span class="c1" id="mwgw">// Retrieve value (persists even after closing and re-opening the browser)</span> <span class="nx" id="mwhA">alert</span><span class="p" id="mwhQ">(</span><span class="nx" id="mwhg">localStorage</span><span class="p" id="mwhw">.</span><span class="nx" id="mwiA">getItem</span><span class="p" id="mwiQ">(</span><span class="s2" id="mwig">"key"</span><span class="p" id="mwiw">));</span>

Only strings can be stored via the Storage API. Attempting to store a different data type will result in an automatic conversion into a string in most browsers. Conversion into JSON, however, allows for effective storage of JavaScript objects.

<span id="mwlA"></span><span class="c1" id="mwlQ">// Store an object instead of a string</span> <span class="nx" id="mwlg">localStorage</span><span class="p" id="mwlw">.</span><span class="nx" id="mwmA">setItem</span><span class="p" id="mwmQ">(</span><span class="s2" id="mwmg">"key"</span><span class="p" id="mwmw">,</span><span class="w" id="mwnA"> </span><span class="p" id="mwnQ">{</span><span class="nx" id="mwng">name</span><span class="o" id="mwnw">:</span><span class="w" id="mwoA"> </span><span class="s2" id="mwoQ">"value"</span><span class="p" id="mwog">});</span> <span class="nx" id="mwow">alert</span><span class="p" id="mwpA">(</span><span class="ow" id="mwpQ">typeof</span><span class="w" id="mwpg"> </span><span class="nx" id="mwpw">localStorage</span><span class="p" id="mwqA">.</span><span class="nx" id="mwqQ">getItem</span><span class="p" id="mwqg">(</span><span class="s1" id="mwqw">'key'</span><span class="p" id="mwrA">));</span><span class="w" id="mwrQ"> </span><span class="c1" id="mwrg">// string</span> <span class="c1" id="mwrw">// Store an integer instead of a string</span> <span class="nx" id="mwsA">localStorage</span><span class="p" id="mwsQ">.</span><span class="nx" id="mwsg">setItem</span><span class="p" id="mwsw">(</span><span class="s2" id="mwtA">"key"</span><span class="p" id="mwtQ">,</span><span class="w" id="mwtg"> </span><span class="mf" id="mwtw">1</span><span class="p" id="mwuA">);</span> <span class="nx" id="mwuQ">alert</span><span class="p" id="mwug">(</span><span class="ow" id="mwuw">typeof</span><span class="w" id="mwvA"> </span><span class="nx" id="mwvQ">localStorage</span><span class="p" id="mwvg">.</span><span class="nx" id="mwvw">getItem</span><span class="p" id="mwwA">(</span><span class="s2" id="mwwQ">"key"</span><span class="p" id="mwwg">));</span><span class="w" id="mwww"> </span><span class="c1" id="mwxA">// string</span> <span class="c1" id="mwxQ">// Store an object using JSON</span> <span class="nx" id="mwxg">localStorage</span><span class="p" id="mwxw">.</span><span class="nx" id="mwyA">setItem</span><span class="p" id="mwyQ">(</span><span class="s2" id="mwyg">"key"</span><span class="p" id="mwyw">,</span><span class="w" id="mwzA"> </span><span class="nb" id="mwzQ">JSON</span><span class="p" id="mwzg">.</span><span class="nx" id="mwzw">stringify</span><span class="p" id="mw0A">({</span><span class="nx" id="mw0Q">name</span><span class="o" id="mw0g">:</span><span class="w" id="mw0w"> </span><span class="s2" id="mw1A">"value"</span><span class="p" id="mw1Q">}));</span> <span class="nx" id="mw1g">alert</span><span class="p" id="mw1w">(</span><span class="nb" id="mw2A">JSON</span><span class="p" id="mw2Q">.</span><span class="nx" id="mw2g">parse</span><span class="p" id="mw2w">(</span><span class="nx" id="mw3A">localStorage</span><span class="p" id="mw3Q">.</span><span class="nx" id="mw3g">getItem</span><span class="p" id="mw3w">(</span><span class="s2" id="mw4A">"key"</span><span class="p" id="mw4Q">)).</span><span class="nx" id="mw4g">name</span><span class="p" id="mw4w">);</span><span class="w" id="mw5A"> </span><span class="c1" id="mw5Q">// value</span>

Nomenclature

The W3C draft is titled "Web Storage". "DOM storage" has also been a commonly used name, though it is becoming less so; for example the "DOM Storage" web articles of the Mozilla and Microsoft developer sites have been replaced with "Web Storage" articles.

The "DOM" in DOM storage does not literally refer to the Document Object Model. According to the W3C, "The term DOM is used to refer to the API set made available to scripts in Web applications, and does not necessarily imply the existence of an actual Document object..."

Web storage management

Storage of web storage objects is enabled by default in current versions of all supporting web browsers, with browser vendors providing ways for users natively to enable or disable web storage, or clear the web storage "cache". Similar controls over web storage are also available through 3rd party browser extensions. Each browser stores Web storage objects differently:

Firefox saves Web storage objects in an SQLite file called webappsstore.sqlite in the user's profile folder.
Google Chrome records Web storage data in an SQLite file in the user's profile. The subfolder containing this file is "\AppData\Local\Google\Chrome\User Data\Default\Local Storage" on Windows, and "~/Library/Application Support/Google/Chrome/Default/Local Storage" on macOS.
Opera's Web storage is located in either "\AppData\Roaming\Opera\Opera\sessions\autosave.win" or "\AppData\Local\Opera\Opera\pstorage\" depending upon Opera's version.
Internet Explorer's Web storage is "\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage".
Safari's Web Storage is located in a folder labeled "LocalStorage" within a hidden "safari" folder.