Web Storage
   HOME

TheInfoList



OR:

Web storage, sometimes known as DOM storage (
Document Object Model The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document wi ...
storage), is a standard
JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, of ...
API provided by
web browser A web browser is application software for accessing websites. When a user requests a web page from a particular website, the browser retrieves its files from a web server and then displays the page on the user's screen. Browsers are used o ...
s. It enables
website A website (also written as a web site) is a collection of web pages and related content that is identified by a common domain name and published on at least one web server. Examples of notable websites are Google, Facebook, Amazon, and Wi ...
s to store persistent data on users' devices similar to
cookies A cookie is a baked or cooked snack or dessert that is typically small, flat and sweet. It usually contains flour, sugar, egg, and some type of oil, fat, or butter. It may include other ingredients such as raisins, oats, chocolate chi ...
, but with much larger capacity and no information sent in
HTTP headers The Hypertext Transfer Protocol (HTTP) is an application layer protocol in the Internet protocol suite model for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web, w ...
. There are two main web storage types: local storage and session storage, behaving similarly to
persistent cookie HTTP cookies (also called web cookies, Internet cookies, browser cookies, or simply cookies) are small blocks of data created by a web server while a user is browsing a website and placed on the user's computer or other device by the user's ...
s and session cookies respectively. Web Storage is standardized by the
World Wide Web Consortium The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web. Founded in 1994 and led by Tim Berners-Lee, the consortium is made up of member organizations that maintain full-time staff working ...
(W3C) and
WHATWG The Web Hypertext Application Technology Working Group (WHATWG) is a community of people interested in evolving HTML and related technologies. The WHATWG was founded by individuals from Apple Inc., the Mozilla Foundation and Opera Software, l ...
, and is supported by all major browsers.


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 A server-side dynamic web page is a web page whose construction is controlled by an application server processing server-side scripts. In server-side scripting, parameters determine how the assembly of every new web page proceeds, and includi ...
. 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 Opera is a form of theatre in which music is a fundamental component and dramatic roles are taken by singers. Such a "work" (the literal translation of the Italian word "opera") is typically a collaboration between a composer and a libr ...
10.50+ allows 5 MB * Safari 8 allows 5 MB *
Firefox Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements current ...
34 allows 10 MB (formerly 5 MB per
origin Origin(s) or The Origin may refer to: Arts, entertainment, and media Comics and manga * ''Origin'' (comics), a Wolverine comic book mini-series published by Marvel Comics in 2002 * ''The Origin'' (Buffy comic), a 1999 ''Buffy the Vampire Sl ...
in 2007) * Google Chrome allows 10 MB per origin *
Internet Explorer Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated IE or MSIE) is a series of graphical web browsers developed by Microsoft which was used in the Windows line of operating systems ( ...
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 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's not well supported by cookies.


Interface and data model

Web storage provides a better programmatic interface than cookies because it exposes an
associative array In computer science, an associative array, map, symbol table, or dictionary is an abstract data type that stores a collection of (key, value) pairs, such that each possible key appears at most once in the collection. In mathematical terms an ...
data model A data model is an abstract model that organizes elements of data and standardizes how they relate to one another and to the properties of real-world entities. For instance, a data model may specify that the data element representing a car be c ...
where the keys and values are both strings. An additional
API An application programming interface (API) is a way for two or more computer programs to communicate with each other. It is a type of software interface, offering a service to other pieces of software. A document or standard that describes how ...
for accessing
structured data A data model is an abstract model that organizes elements of data and standardizes how they relate to one another and to the properties of real-world entities. For instance, a data model may specify that the data element representing a car be c ...
is being considered by the W3C Web Applications Working Group.


Usage

Browsers that support web storage have the global objects sessionStorage and localStorage declared at the window level. The following
JavaScript JavaScript (), often abbreviated as JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS. As of 2022, 98% of websites use JavaScript on the client side for webpage behavior, of ...
code can be used on these browsers to trigger web storage behavior: // Store value on browser for duration of the session sessionStorage.setItem('key', 'value'); // Retrieve value (gets deleted when browser is closed and re-opened) ... alert(sessionStorage.getItem('key')); // Store value on the browser beyond the duration of the session localStorage.setItem('key', 'value'); // Retrieve value (persists even after closing and re-opening the browser) alert(localStorage.getItem('key')); 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. // Store an object instead of a string localStorage.setItem('key', ); alert(typeof localStorage.getItem('key')); // string // Store an integer instead of a string localStorage.setItem('key', 1); alert(typeof localStorage.getItem('key')); // string // Store an object using JSON localStorage.setItem('key', JSON.stringify()); alert(JSON.parse(localStorage.getItem('key')).name); // value


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 The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document wi ...
. 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 to natively 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 Mozilla Firefox, or simply Firefox, is a free and open-source web browser developed by the Mozilla Foundation and its subsidiary, the Mozilla Corporation. It uses the Gecko rendering engine to display web pages, which implements current ...
saves Web storage objects in a
SQLite SQLite (, ) is a database engine written in the C programming language. It is not a standalone app; rather, it is a library that software developers embed in their apps. As such, it belongs to the family of embedded databases. It is the m ...
file called webappsstore.sqlite in the user's profile folder. * Google Chrome records Web storage data in a
SQLite SQLite (, ) is a database engine written in the C programming language. It is not a standalone app; rather, it is a library that software developers embed in their apps. As such, it belongs to the family of embedded databases. It is the m ...
file in the user's profile. The subfolder containing this file is "\AppData\Local\Google\Chrome\User Data\Default\Local Storage" on
Windows Windows is a group of several proprietary graphical operating system families developed and marketed by Microsoft. Each family caters to a certain sector of the computing industry. For example, Windows NT for consumers, Windows Server for ser ...
, and "~/Library/Application Support/Google/Chrome/Default/Local Storage" on
macOS macOS (; previously OS X and originally Mac OS X) is a Unix operating system developed and marketed by Apple Inc. since 2001. It is the primary operating system for Apple's Mac computers. Within the market of desktop and lapt ...
. *
Opera Opera is a form of theatre in which music is a fundamental component and dramatic roles are taken by singers. Such a "work" (the literal translation of the Italian word "opera") is typically a collaboration between a composer and a libr ...
'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 Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly abbreviated IE or MSIE) is a series of graphical web browsers developed by Microsoft which was used in the Windows line of operating systems ( ...
'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. Where is Safari web data stored?
discussions.apple.com. Retrieved 20 2022-10-06


See also

*
Indexed Database API The Indexed Database API (commonly referred to as IndexedDB) is a JavaScript application programming interface (API) provided by web browsers for managing a NoSQL database of JSON objects. It is a standard maintained by the World Wide Web Co ...


References


External links


HTML Living Standard 11 Web storage

W3C: Web StorageWeb Storage API
on Mozilla Developer Network
Opera: Web Storage: easier, more powerful client-side data storage
on BlackBerry DevZone {{Web interfaces World Wide Web Consortium standards HTML5 Internet privacy