Web storage

Last updated

Web storage, sometimes known as DOM storage (Document Object Model storage), is a standard JavaScript API provided by web browsers. It enables websites to store persistent data on users' devices similar to cookies, but with much larger capacity [1] and no information sent in HTTP headers. [2] There are two main web storage types: local storage and session storage, behaving similarly to persistent cookies and session cookies respectively. Web Storage is standardized by the World Wide Web Consortium (W3C) [3] and WHATWG, [4] and is supported by all major browsers.

Contents

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:

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's not well supported by cookies. [9]

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.

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:

// Store value on browser for duration of the sessionsessionStorage.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 sessionlocalStorage.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. [10] 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 stringlocalStorage.setItem('key',{name:'value'});alert(typeoflocalStorage.getItem('key'));// string// Store an integer instead of a stringlocalStorage.setItem('key',1);alert(typeoflocalStorage.getItem('key'));// string// Store an object using JSONlocalStorage.setItem('key',JSON.stringify({name:'value'}));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. [11] [12] [13] [14]

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..." [15]

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". [16] Similar controls over web storage are also available through 3rd party browser extensions. Each browser stores Web storage objects differently:

Similar Technologies

While localStorage is often used for storing persistent key-value pairs, other APIs have emerged to enable various use cases like iteratable indexing [19] and with different performance patterns:

Related Research Articles

<span class="mw-page-title-main">Document Object Model</span> Convention for representing and interacting with objects in HTML, XHTML, and XML documents

The Document Object Model (DOM) is a cross-platform and language-independent interface that treats an HTML or XML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree. Each branch of the tree ends in a node, and each node contains objects. DOM methods allow programmatic access to the tree; with them one can change the structure, style or content of a document. Nodes can have event handlers attached to them. Once an event is triggered, the event handlers get executed.

<span class="mw-page-title-main">Interface description language</span> Computer language used to describe a software components interface

An interface description language or interface definition language (IDL) is a generic term for a language that lets a program or object written in one language communicate with another program written in an unknown language. IDLs are usually used to describe data types and interfaces in a language-independent way, for example, between those written in C++ and those written in Java.

<span class="mw-page-title-main">SQLite</span> Serverless relational database management system (RDBMS)

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 most widely deployed database engine, as it is used by several of the top web browsers, operating systems, mobile phones, and other embedded systems.

DOM Events are a signal that something has occurred, or is occurring, and can be triggered by user interactions or by the browser. Client-side scripting languages like JavaScript, JScript, VBScript, and Java can register various event handlers or listeners on the element nodes inside a DOM tree, such as in HTML, XHTML, XUL, and SVG documents.

Ajax is a set of web development techniques that uses various web technologies on the client-side to create asynchronous web applications. With Ajax, web applications can send and retrieve data from a server asynchronously without interfering with the display and behaviour of the existing page. By decoupling the data interchange layer from the presentation layer, Ajax allows web pages and, by extension, web applications, to change content dynamically without the need to reload the entire page. In practice, modern implementations commonly utilize JSON instead of XML.

<span class="mw-page-title-main">Same-origin policy</span> Security measure for client-side scripting

In computing, the same-origin policy (SOP) is a concept in the web application security model. Under the policy, a web browser permits scripts contained in a first web page to access data in a second web page, but only if both web pages have the same origin. An origin is defined as a combination of URI scheme, host name, and port number. This policy prevents a malicious script on one page from obtaining access to sensitive data on another web page through that page's Document Object Model (DOM).

The canvas element is part of HTML5 and allows for dynamic, scriptable rendering of 2D shapes and bitmap images. It is a low level, procedural model that updates a bitmap. HTML5 Canvas also helps in making 2D games.

<span class="mw-page-title-main">HTTP cookie</span> Small pieces of data stored by a web browser while on a website

HTTP 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 web browser. Cookies are placed on the device used to access a website, and more than one cookie may be placed on a user's device during a session.

A browser extension is a software module for customizing a web browser. Browsers typically allow users to install a variety of extensions, including user interface modifications, cookie management, ad blocking, and the custom scripting and styling of web pages.

A local shared object (LSO), commonly called a Flash cookie, is a piece of data that websites that use Adobe Flash may store on a user's computer. Local shared objects have been used by all versions of Flash Player since version 6.

<span class="mw-page-title-main">HTML5</span> Fifth and current version of hypertext markup language

HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and final major HTML version that is a World Wide Web Consortium (W3C) recommendation. The current specification is known as the HTML Living Standard. It is maintained by the Web Hypertext Application Technology Working Group (WHATWG), a consortium of the major browser vendors.

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, leading Web browser vendors in 2004.

Microdata is a WHATWG HTML specification used to nest metadata within existing content on web pages. Search engines, web crawlers, and browsers can extract and process Microdata from a web page and use it to provide a richer browsing experience for users. Search engines benefit greatly from direct access to this structured data because it allows them to understand the information on web pages and provide more relevant results to users. Microdata uses a supporting vocabulary to describe an item and name-value pairs to assign values to its properties. Microdata is an attempt to provide a simpler way of annotating HTML elements with machine-readable tags than the similar approaches of using RDFa and microformats.

The Indexed Database API is a JavaScript application programming interface (API) provided by web browsers for managing a NoSQL database of objects. It is a standard maintained by the World Wide Web Consortium (W3C).

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be accessed from another domain outside the domain from which the first resource was served.

Web SQL Database is a deprecated web browser API specification for storing data in databases that can be queried using SQL variant. The technology was only ever implemented in Blink-based and WebKit-based browsers like Google Chrome and the new Microsoft Edge. As of September 2023, WebSQL is being phased out in favor of WebStorage and IndexedDB and OPFS, but still available in some contexts.

Content Security Policy (CSP) is a computer security standard introduced to prevent cross-site scripting (XSS), clickjacking and other code injection attacks resulting from execution of malicious content in the trusted web page context. It is a Candidate Recommendation of the W3C working group on Web Application Security, widely supported by modern web browsers. CSP provides a standard method for website owners to declare approved origins of content that browsers should be allowed to load on that website—covered types are JavaScript, CSS, HTML frames, web workers, fonts, images, embeddable objects such as Java applets, ActiveX, audio and video files, and other HTML5 features.

HTML5 Audio is a subject of the HTML5 specification, incorporating audio input, playback, and synthesis, as well as in the browser. iOS

<span class="mw-page-title-main">Progressive web app</span> Specific form of single page web application

A progressive web application (PWA), or progressive web app, is a type of application software delivered through the web, built using common web technologies including HTML, CSS, JavaScript, and WebAssembly. It is intended to work on any platform with a standards-compliant browser, including desktop and mobile devices.

Credential Management, also referred to as a Credential Management System (CMS), is an established form of software that is used for issuing and managing credentials as part of public key infrastructure (PKI).

References

  1. 1 2 Dixit, Shwetank (2013-03-05). "Web Storage: Easier, More Powerful Client-Side Data Storage". Dev.Opera. Retrieved 2021-05-14.
  2. ↑ Hume, Andy (2011-03-24). "localStorage is not cookies". andyhume.net. Archived from the original on 2011-06-02. Retrieved 2021-05-14.
  3. ↑ Hickson, Ian, ed. (2021-01-28). "Web Storage (Second Edition)". W3C. Web Platform Working Group. Retrieved 2021-05-14.
  4. ↑ WHATWG. "HTML Standard § 12 Web storage". html.spec.whatwg.org. Retrieved 2021-05-14.
  5. 1 2 Kitamura, Eiji (2014-01-28). "Working with quota on mobile browsers: A research report on browser storage - HTML5 Rocks". Archived from the original on 2014-02-01. Retrieved 2021-05-04.
  6. ↑ John Resig: DOM Storage. John Resig, ejohn.org. Retrieved on 2011-06-12.
  7. ↑ michaeln (2013-03-08). "Issue 21680002: Up the window.localstorage limit to 10M from 5M. - Code Review". Chromium Code Reviews. Retrieved 2021-05-14.
  8. ↑ Microsoft (2016-10-20). "Introduction to Web Storage". Microsoft Docs. Microsoft. Retrieved 2021-05-14.
  9. ↑ W3C: Web Storage draft standard. Dev.w3.org (2004-02-05). Retrieved on 2011-06-12.
  10. ↑ W3C, 2011 http://dev.w3.org/html5/webstorage/
  11. ↑ "DOM Storage". Mozilla Developer Network. Archived from the original on June 4, 2011. Retrieved 2011-06-12.
  12. ↑ "Web Storage API". Mozilla Developer Network. Retrieved June 28, 2017.
  13. ↑ "Introduction to DOM Storage". Microsoft Developer Network. Archived from the original on June 8, 2011. Retrieved 2011-06-12.
  14. ↑ "Introduction to Web Storage". Microsoft Developer Network. Retrieved June 28, 2017.
  15. ↑ W3C: Web Storage draft standard. Dev.w3.org (2004-02-05). Retrieved on 2011-06-12.
  16. ↑ How to enable, disable, or clear your browser's "Web Storage" cache. mid.as. Retrieved on 2022-10-06.
  17. ↑ Webappsstore.sqlite kb.mozillazine.org
  18. ↑ Where is Safari web data stored? discussions.apple.com. Retrieved 20 2022-10-06
  19. ↑ "localStorage in Modern Applications". RxDB. Retrieved August 14, 2023.
This page is based on this Wikipedia article
Text is available under the CC BY-SA 4.0 license; additional terms may apply.
Images, videos and audio are available under their respective licenses.