Web Storage API: Browser Key-Value Stores
Web Storage provides simple browser key-value stores: localStorage and sessionStorage. Use localStorage for data that persists across sessions, like user settings, and sessionStorage for data tied to a single tab.
Why it exists
Web Storage was created to provide a simple, intuitive way for browsers to store key/value pairs, improving upon the older, less straightforward cookie mechanism. It addresses the need for both temporary (session-specific) and long-term (persistent) client-side data storage.
The mental model
Think of Web Storage as two separate filing cabinets in the browser. The localStorage cabinet is permanent and shared by all windows from your site. The sessionStorage cabinet is temporary; each browser tab gets its own, and its contents are discarded when the tab closes. Both store simple string key-value pairs.
How it works
The API is accessed via window.localStorage and window.sessionStorage. Both return a Storage object with methods like setItem(key, value), getItem(key), and removeItem(key). All data is stored as strings. Crucially, these operations are synchronous, meaning they block JavaScript execution until they complete. Each origin (protocol, host, and port) gets its own separate, isolated storage area.
When to use it
Use localStorage for small amounts of non-sensitive data that should persist across sessions, like a user's theme preference ('dark' or 'light'). Use sessionStorage for data related to a single user task within one tab, like partially filled form data that shouldn't be lost on a page refresh but isn't needed after the tab is closed.
When not to use it
Avoid Web Storage for large datasets or in performance-critical code paths. Its synchronous, blocking nature can make your UI unresponsive. For these cases, an asynchronous alternative like IndexedDB is a better choice. Never store sensitive information like tokens or passwords, as it is easily accessible via client-side scripts.
One canonical example
A common use for localStorage is remembering a user's theme choice. When a user toggles a dark mode switch, you execute localStorage.setItem('theme', 'dark');. On subsequent page loads, your script checks if (localStorage.getItem('theme') === 'dark') to apply the dark theme immediately, providing a consistent user experience.
Interview question
Which scenario is the most appropriate use case for sessionStorage?
- a.Temporarily saving progress on a multi-page form within a single browser tab.Correct
- b.Storing a user's dark mode preference to apply on every future visit.
- c.Keeping a user's authentication token secure for the duration of their session.
- d.Storing a large catalog of product information for offline browsing.
Why? this is the answer
sessionStorage is ideal for temporary data tied to a single tab, such as partially filled form data that should persist across page refreshes but not after the tab closes. Storing sensitive data like authentication tokens is explicitly advised against for any Web Storage, and large datasets are better handled by IndexedDB.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
- #web apis
- #javascript
- #browser
- #storage
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on web apis — each one lists the topics its interview covers.
See open roles