HTML: Web Storage API - localStorage and sessionStorage

Using the Web Storage API in HTML with Examples - A Comprehensive Guide

{tocify} $title={Table of Contents}

HTML web storage; is more profitable than cookies.

There are several reasons why web developers use the HTML Web Storage API:

• Client-side storage: The Web Storage API provides a way to store data on the client-side (i.e., in the user's browser) without the need for server-side storage. This can be useful for storing small amounts of data that need to be accessed quickly and frequently, such as user preferences or settings.

• Persistent data: The data stored using the Web Storage API persists even after the user closes the browser window or navigates away from the page. This means that the data can be retrieved and used the next time the user visits the page.

• Scalability: The Web Storage API allows developers to store large amounts of data on the client-side, which can be more scalable than storing the data on the server-side.

• Improved performance: Because the data is stored locally, it can be accessed more quickly than if it had to be fetched from a remote server. This can improve the performance of web applications, particularly those that rely heavily on client-side data.

• Cross-browser compatibility: The Web Storage API is supported by all modern web browsers, so developers can use it to create web applications that work consistently across different browsers and platforms.

What is HTML Web Storage?

HTML Web Storage is a web browser-based mechanism that allows web developers to store data locally on the client-side (i.e., on the user's computer) using key-value pairs. It is also known as DOM storage or local storage.

The HTML Web Storage API consists of two objects: localStorage and sessionStorage. 

Both objects provide a way to store data on the client-side, but they differ in terms of the scope and lifetime of the stored data.

localStorage is a persistent storage mechanism that allows developers to store data on the client-side that persists even after the user closes the browser window or navigates away from the page. 

The data is associated with the web page's domain that created it and can be accessed by any JavaScript code running on the same domain.

sessionStorage is similar to localStorage, but the stored data is associated with a particular session, defined as the time between when the user opens the page and when they close the browser window. 

The data is not shared between different tabs or windows of the same browser and is not available once the session ends.

Both localStorage and sessionStorage are part of the HTML5 specification and are widely supported by modern web browsers. 

They provide a convenient and efficient way for web developers to store and retrieve data on the client-side, which can improve the performance and scalability of web applications.

HTML Web Storage Objects

HTML web storage delivers two objects for storing data on the client:

• window.localStorage: stores data with no expiration date
• window.sessionStorage: stores data for one session (data is lost when the browser tab is closed)

Before utilising web storage, inspect browser support for localStorage and sessionStorage:

if (typeof(Storage) !== "undefined") {

  // Code for localStorage/sessionStorage.

} else {

  // Sorry! No Web Storage support..

}{codeBox}

The localStorage Object

The localStorage object is a part of the HTML Web Storage API and provides a persistent storage mechanism for storing key-value pairs on the client-side. 

Here are some of the key features of the localStorage object:

Persistence: The data stored in localStorage persists even after the browser window is closed. This means that the data can be accessed and used again the next time the user visits the website.

Scoped to domain: The data stored in localStorage is associated with the domain of the web page that created it. This means that the data can be accessed by any JavaScript code running on the same domain.

Simple API: The localStorage object provides a simple API for storing and retrieving data. The setItem() method is used to set a key-value pair, while the getItem() method is used to retrieve a value based on a key. 

The removeItem() method is used to remove an item from localStorage, and the clear() method is used to remove all items.

Large storage capacity: The amount of data that can be stored in localStorage varies depending on the browser and device, but it is typically several megabytes. 

This makes it suitable for storing large amounts of data that need to be accessed frequently.

Here is an example of how to use the “localStorage” object to store and retrieve data:

// Set an item in localStorage

localStorage.setItem('name', 'John');

// Get an item from localStorage

var name = localStorage.getItem('name');

// Remove an item from localStorage

localStorage.removeItem('name');

// Clear all items from localStorage

localStorage.clear();{codeBox}

Overall, the localStorage object provides a convenient and efficient way for web developers to store and retrieve data on the client-side, which can improve the performance and scalability of web applications.

The sessionStorage Object

The sessionStorage object is a part of the HTML Web Storage API. It provides a storage mechanism for storing key-value pairs associated with a particular session. 

Here are some of the key features of the sessionStorage object:

Session-specific: The data stored in sessionStorage is associated with a particular session, which is defined as the time between when the user opens the page and when they close the browser window. This means that the data is not available once the session ends.

Scoped to domain: The data stored in sessionStorage is associated with the domain of the web page that created it. This means that the data can be accessed by any JavaScript code running on the same domain.

Simple API: The sessionStorage object provides a simple API for storing and retrieving data. 

The setItem() method is used to set a key-value pair, while the getItem() method is used to retrieve a value based on a key. 

The removeItem() method is used to remove an item from sessionStorage, and the clear() method is used to remove all items.

Limited storage capacity: The amount of data that can be stored in sessionStorage is limited and varies depending on the browser and device. 

This makes it suitable for storing small amounts of data that need to be accessed frequently during a particular session.

Here is an example of how to use the “sessionStorage” object to store and retrieve data:

// Set an item in sessionStorage

sessionStorage.setItem('name', 'John');

// Get an item from sessionStorage

var name = sessionStorage.getItem('name');

// Remove an item from sessionStorage

sessionStorage.removeItem('name');

// Clear all items from sessionStorage

sessionStorage.clear();{codeBox}

Overall, the “sessionStorage” object provides a convenient and efficient way for web developers to store and retrieve data on the client-side that is session-specific, which can be useful for maintaining state during a particular session.

Interesting Facts about HTML Web Storage API

• HTML Web Storage API provides two objects, localStorage and sessionStorage, that allow developers to store key-value pairs in the client's browser.

• localStorage and sessionStorage both provide persistent storage of key-value pairs, but the key difference between them is that localStorage values persist even after the browser is closed, while sessionStorage values are cleared when the browser is closed.

• The amount of data that can be stored in Web Storage is limited to a few megabytes per origin (domain and protocol). The actual size limit varies by browser, but it is typically at least 5-10 MB.

• Web Storage is not intended to be used as a replacement for server-side storage, as it is not secure and can be manipulated by the client.

• Web Storage can be accessed using JavaScript methods like setItem(), getItem(), and removeItem(). These methods can be used to store, retrieve, and delete data from Web Storage.

• Web Storage can be used to store various types of data, including strings, numbers, and even JSON objects.

• Web Storage can be used to improve the performance of web applications by reducing the need to make server requests for frequently accessed data.

• Web Storage is widely supported by modern browsers, including Chrome, Firefox, Safari, and Edge, but it may not be available on older browsers.

• The use of Web Storage is subject to certain security restrictions, such as the same-origin policy, which prevents scripts from accessing data stored in a different origin.

• Web Storage can be cleared by the user through the browser settings, so developers should not rely on it to store critical or sensitive data.

Conclusion:

Friends, according to my expertise, I have written complete information to help you with “HTML Web Storage API.” If this post is favourable for you or not, please tell me by commenting.

If you liked this post, do not forget to share it with your friends so they can get information about it.

You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.

Please tell us through the comment section if you think we miss anything.