https://DevOpsCloud.io -- Cloud Monk Losang Jinpa, Ph.D., MCSE/MCT, GitOps DevOps Engineer

Return to JavaScript, Web APIs, Web API Bibliography, JavaScript DevOps

• Fair Use Source: B0CW1K187N (WbAPICook 2024)

“ (WbAPICook 2024)

Chapter 2. Simple Persistence with the Web Storage API

Introduction

“The Web Storage API persists data - simple data locally, in the user’s browser. You can retrieve this data later, even after closing and reopening the browser.” (WbAPICook 2024)

“This API has a Web Storage API interface that provides data access and data persistence. You don’t create instances of Storage directly; there are two global instances: window.localStorage and window.sessionStorage. The only difference between these is how long they retain the data.” (WbAPICook 2024)

”sessionStorage data is associated with a specific browser session. It retains the data if the web page is reloaded, but closing the browser completely loses the data. Different web browser tabs for the same origin do not share the same persisted data.“ (WbAPICook 2024)

“On the other hand, localStorage data shares the same storage space across all browser tabs and browser sessions for the same origin. The browser retains this data even after you close the browser. In general, browser session storage is a good choice if you want to store something ephemeral (ephemeral storage) or sensitive data that you want to be destroyed once the browser is closed. In both cases, storage space is specific to a given origin.” (WbAPICook 2024)

“A web page’s origin is a JavaScript string combining the web protocol (http or https), hostname, and TCP/IP port of a URL. For example, the URLs https://example.com/path/to/[[index.html]] and https://example.com/profile/[[index.htm]]l both have the same web origin: https://[[example.com]].

Getting and Setting Items

Web Storage can only store string values. Each value has a key that you can use to look it up. The API is simple:

getItem(key)

Returns the string bound to a key, or null if the key doesn’t exist.

setItem(key, value)

Stores a string value under the given key. If the key already exists, you’ll overwrite it.

clear()

Deletes all stored data for the current origin.

Disadvantages

Web Storage can be really useful, but it does have a few disadvantages:

Data storage limitations

Web Storage can only store string data. You can store simple objects, but not directly—you’ll need to convert them to a JavaScript Object Notation (JSON) string first.

Size limitations

Each origin has a limited amount of space available for storage. In most browsers this is 5 megabytes. If an origin’s storage becomes full, the browser will throw an exception if you attempt to add more data.

Security concerns

Even though the browser stores each origin’s data separately, it’s still vulnerable to cross-site scripting (XSS) attacks. An attacker can inject code via an XSS attack that steals locally persisted data. Be mindful of what sensitive data you store here.

Note

The recipes in this chapter all use local storage, but they all apply to session storage as well, since both objects implement the same Storage interface.

Fair Use Sources:

• B0CW1K187N (WbAPICook 2024)