Web Storage API

The Web Storage API allows JavaScript to store data locally in the browser. It provides key-value storage that persists either across sessions (localStorage) or only during a session (sessionStorage).

Unlike cookies, Web Storage is larger in size, faster, and doesn’t send data to the server automatically.

Types of Web Storage

localStorage

• Stores data permanently, even after the browser is closed.
• Data persists until explicitly removed.

sessionStorage

• Stores data only for the current browser tab/session.
• Data is cleared when the tab or browser is closed.

Key Methods & Properties

1. setItem(key, value)

Stores a value in the browser storage under a specified key. It can be used with localStorage or sessionStorage to save data that persists across page reloads (localStorage) or a single session (sessionStorage).

localStorage.setItem("username", "JohnDoe");
sessionStorage.setItem("sessionID", "12345");

2. getItem(key)

Retrieves the value stored under the given key. If the key does not exist, it returns null.

console.log(localStorage.getItem("username")); // JohnDoe

3. removeItem(key)

Deletes the key-value pair from the storage, removing the saved data associated with that key.

localStorage.removeItem("username");

4. clear()

Clears all data from the storage, removing every stored key-value pair at once.

sessionStorage.clear();

5. key(index)

Returns the key name at a specific index in the storage, useful for iterating over stored items.

console.log(localStorage.key(0)); // "username"

6. length

Gives the total number of key-value pairs currently stored in the storage.

console.log(localStorage.length); // 1

Practical Examples

1. Storing and Retrieving Data

You can save data in the browser using localStorage or sessionStorage and retrieve it anytime using the same key. Local storage persists across sessions, while session storage lasts only until the browser tab is closed.

// Store data
localStorage.setItem("theme", "dark");
sessionStorage.setItem("token", "abc123");

// Retrieve data
const theme = localStorage.getItem("theme");
console.log(theme); // dark

2. Updating Stored Data

Using setItem with an existing key overwrites the previous value, allowing you to update stored information easily.

localStorage.setItem("theme", "light"); // Overwrites previous value
console.log(localStorage.getItem("theme")); // light

3. Removing Data

removeItem deletes a specific key-value pair from storage, so the data is no longer accessible.

localStorage.removeItem("theme");
console.log(localStorage.getItem("theme")); // null

4. Storing Objects

Web Storage can only store strings, so objects must be converted to JSON strings with JSON.stringify and retrieved using JSON.parse.

const user = { name: "Alice", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

const storedUser = JSON.parse(localStorage.getItem("user"));
console.log(storedUser.name); // Alice

5. Session Storage 

Session storage temporarily saves data for the current browser tab and clears automatically when the tab is closed, useful for temporary information like shopping carts or session tokens.

sessionStorage.setItem("cartID", "98765");

console.log(sessionStorage.getItem("cartID")); // 98765

sessionStorage.clear(); // Removes all session data

Summary Table of Storage API Methods