Local Storage

Updated September 30, 20263 min read

In short

Local storage is a browser feature that lets a website save text as key-value pairs on the user's device, where it stays even after the browser is closed.

What is local storage?

Local storage, used in JavaScript through the localStorage object, is part of the Web Storage API built into every modern browser. It stores data as key-value pairs, where both keys and values are strings, and the data stays on the device until your code or the user deletes it, even after the browser is closed and reopened. Websites use it to remember things like a chosen theme or language, dismissed banners, and unsaved drafts.

The API is small and synchronous: setItem saves a value, getItem reads it, removeItem deletes one entry, and clear deletes everything. Because only strings are stored, objects are usually converted with JSON.stringify before saving and JSON.parse after reading. The data is scoped to the origin, meaning the combination of protocol, domain, and port, and browsers typically allow about 5 MB per origin.

Its sibling, sessionStorage, has exactly the same API but a shorter memory: its data belongs to a single browser tab and is deleted when that tab is closed. Local storage also differs from cookies. Cookies hold only about 4 KB and are sent to the server automatically with every matching HTTP request, while local storage holds much more, stays in the browser, and is never sent anywhere unless your code sends it.

Think of local storage as a small notebook the browser keeps for each website. Because any JavaScript running on the page can read that notebook, a cross-site scripting (XSS) attack can steal whatever it contains, so it should not hold passwords or session tokens, which are safer in HttpOnly cookies that scripts cannot read. For large or structured data, such as data for an offline app, browsers offer IndexedDB instead.

Key takeaways

Local storage saves string key-value pairs in the browser, separately for each origin.
Data persists after the browser closes, until code or the user deletes it.
sessionStorage has the same API, but its data is cleared when the tab closes.
Unlike cookies, local storage data is not sent to the server with requests.
Any script on the page can read it, so don't store passwords or session tokens there.

Example

Saving and reading data with localStoragejavascript

// Save a user preference; values are always stored as strings
localStorage.setItem("theme", "dark");
console.log(localStorage.getItem("theme")); // "dark"

// Store an object by converting it to JSON
const settings = { fontSize: 16, showTips: false };
localStorage.setItem("settings", JSON.stringify(settings));
const saved = JSON.parse(localStorage.getItem("settings") ?? "{}");

// sessionStorage works the same way but is cleared when the tab closes
sessionStorage.setItem("draft", "Hello...");

localStorage.removeItem("theme"); // delete a single key

Readers ask

What is the difference between localStorage and sessionStorage?

Both store string key-value pairs in the browser and share the same API. localStorage data persists until it is deleted, while sessionStorage data belongs to one tab and is cleared when that tab is closed.

What is the difference between local storage and cookies?

Cookies are small (about 4 KB), can have an expiry date, and are sent to the server with every matching request, which makes them suitable for sessions. Local storage holds more data, stays in the browser, and can only be read by JavaScript from the same origin.

Is it safe to store a JWT in local storage?

It is risky, because any script on the page, including one injected through an XSS attack, can read local storage. Many security guides recommend keeping session tokens in HttpOnly, Secure cookies instead, combined with CSRF protection.

Often compared

Cookies vs Local StorageCookies are small data the browser sends to the server with every matching request, while local storage keeps larger data in the browser and never sends it.