#HTML5 Web Storage

The HTML5 Web Storage API provides a mechanism that allows browsers to securely store key-value pair data on the client side. It's simpler and more intuitive than using Cookies, and has larger storage capacity.

Web storage is divided into two main types:

• localStorage: Permanent storage. Data persists even if the user closes the browser or restarts the computer, until explicitly deleted. Data is shared across all same-origin (same protocol, domain, port) windows and tabs in the same browser.
• sessionStorage: Session-level storage. Data is only valid during the current browser session. When the user closes the tab or browser window that created the data, the data is deleted.

#Advantages of Web Storage

• Larger capacity: Typically provides at least 5MB of storage space, far exceeding Cookie's 4KB.
• More secure: Data is not sent to the server with every HTTP request like Cookies, reducing unnecessary data transfer and security risks.
• Simpler API: Provides a very simple set of setItem, getItem, removeItem methods.

#Using localStorage

The localStorage object is used to store data with no expiration time.

#Storing Data with setItem()

// Store data with key "lastname" and value "Smith"
localStorage.setItem("lastname", "Smith");

// You can also assign directly like a regular object
localStorage.username = "John";

#Reading Data with getItem()

// Read data with key "lastname"
var lastName = localStorage.getItem("lastname");
console.log(lastName); // Output: "Smith"

// Direct property access
console.log(localStorage.username); // Output: "John"

#Deleting Data with removeItem()

// Delete data with key "lastname"
localStorage.removeItem("lastname");

#Clearing All Data with clear()

localStorage.clear();

Note: Web storage can only store strings. If you want to store a JavaScript object, you need to first convert it to a JSON string using JSON.stringify(), and when reading, parse it back using JSON.parse().

const user = { name: 'Alice', age: 30 };

// Store
localStorage.setItem('user', JSON.stringify(user));

// Read
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // Output: Alice

#Using sessionStorage

The sessionStorage object's API is exactly the same as localStorage; the only difference is its lifecycle.

// Store data in the current session
sessionStorage.setItem("session_id", "12345");

// Read data from the current session
var sessionId = sessionStorage.getItem("session_id");

When you close this browser tab, the session_id data will be automatically cleared. Data in localStorage, however, will be retained.