localStorage / sessionStorage Since: HTML5(IE origin → standardized)

A storage API for saving data in the browser. Data stored in localStorage persists even after the browser is closed, while data in sessionStorage is cleared when the tab is closed.

Syntax

// Save data.
localStorage.setItem("key", "value");

// Retrieve data.
var value = localStorage.getItem("key");

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

// Delete all data.
localStorage.clear();

Methods and Properties

Method / Property	Description
setItem("key", "value")	Saves a value under the specified key. If the key already exists, the value is overwritten.
getItem("key")	Returns the value for the specified key. Returns `null` if the key does not exist.
removeItem("key")	Deletes the data associated with the specified key.
clear()	Deletes all stored data at once.
length	Returns the number of items currently stored.

Sample Code

// Save and retrieve a string
localStorage.setItem("username", "Taro");
var name = localStorage.getItem("username");
console.log(name); // Outputs "Taro"

// To save an object, convert it to a JSON string first.
var user = { name: "Taro", age: 25 };
localStorage.setItem("user", JSON.stringify(user));

// When retrieving, parse the JSON string back into an object.
var savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // Outputs "Taro"
console.log(savedUser.age);  // Outputs "25"

// Check the number of stored items.
console.log(localStorage.length); // Outputs "2"

// When a key does not exist
var result = localStorage.getItem("address");
console.log(result); // Outputs "null"

// Delete a specific item.
localStorage.removeItem("username");

// Delete all data.
localStorage.clear();

Difference Between localStorage and sessionStorage

Storage	Description
localStorage	Data has no expiration date and persists even after the browser is closed. It remains until the user explicitly deletes it or it is removed via `clear()` or `removeItem()`.
sessionStorage	Data is cleared when the tab is closed. Even on the same domain, each tab has its own separate storage.

Overview

localStorage and sessionStorage are Web Storage APIs that let you store key-value pairs in the browser. Unlike cookies, data is not automatically sent to the server, making them well-suited for client-side data management.

Only strings can be stored. To save objects or arrays, convert them to a string with JSON.stringify() before saving, and restore them with JSON.parse() when retrieving. Storage capacity varies by browser, but is typically around 5 MB.

localStorage is commonly used for saving theme preferences, temporarily persisting form input, and managing shopping carts — anywhere you want data to survive after the page is closed. sessionStorage, on the other hand, is a good fit for temporary data in multi-step forms and similar cases where you want the data cleared when the tab is closed.