Web storage

Last updated

Web storage, formerly 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 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:

See also

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

SQLite is a free and open-source relational 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.

In computing, the same-origin policy (SOP) is a concept in the web-app 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).

<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.

In the context of the World Wide Web, a bookmark is a Uniform Resource Identifier (URI) that is stored for later retrieval in any of various storage formats. All modern web browsers include bookmark features. Bookmarks are called favorites or Internet shortcuts in Internet Explorer and Microsoft Edge, and by virtue of that browser's large market share, these terms have been synonymous with bookmark since the First Browser War. Bookmarks are normally accessed through a menu in the user's web browser, and folders are commonly used for organization. In addition to bookmarking methods within most browsers, many external applications offer bookmarks management.

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 previous version of HyperText Markup Language

HTML5 is a markup language used for structuring and presenting hypertext documents on the World Wide Web. It was the fifth and final major HTML version that is now a retired 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 Microdata 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.

Server-Sent Events (SSE) is a server push technology enabling a client to receive automatic updates from a server via an HTTP connection, and describes how servers can initiate data transmission towards clients once an initial client connection has been established. They are commonly used to send message updates or continuous data streams to a browser client and designed to enhance native, cross-browser streaming through a JavaScript API called EventSource, through which a client requests a particular URL in order to receive an event stream. The EventSource API is standardized as part of HTML Living Standard by the WHATWG. The media type for SSE is text/event-stream.

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 to safely bypass the same-origin policy, that is, it allows a web page to access restricted resources from a server on a domain different than the domain that served the web page.

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 browsers like Google Chrome and the new Microsoft Edge, and WebKit-based browsers like Safari. As of February 2024, WebSQL is being phased out in favor of WebStorage and IndexedDB and OPFS, but still available in some contexts under restrictive conditions.

WebRTC is a free and open-source project providing web browsers and mobile applications with real-time communication (RTC) via application programming interfaces (APIs). It allows audio and video communication and streaming to work inside web pages by allowing direct peer-to-peer communication, eliminating the need to install plugins or download native apps.

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.

HTML audio is a subject of the HTML specification, incorporating audio |speech to text]], all in the browser.

<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 web app that can be installed on a device as a standalone application. PWAs are installed using the offline cache of the device's web browser.

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. ↑ Webappsstore.sqlite kb.mozillazine.org
  17. ↑ Where is Safari web data stored? discussions.apple.com. Retrieved 20 2022-10-06
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.