What is web storage? Plain-English meaning

Short definition: Web storage is a browser feature that lets websites save data on your device using localStorage (persists) or sessionStorage (cleared when the tab closes).

Plain-English explanation

Web storage is a way for a website to keep small pieces of information on your computer or phone so it can remember things between visits. It works through two main tools: localStorage, which keeps data even after you close the browser, and sessionStorage, which only lasts for the current tab. This data is stored in the browser itself, not on a remote server. Unlike cookies, web storage does not send the data to the server with every request—it stays local. For example, a website can save your preferences like theme color or language without asking you to log in again.

Why it matters

You will care about web storage because it affects how websites remember your settings and progress, and it also has privacy implications. When you clear your browser's cached data, you may lose saved preferences or logged-in states. Understanding web storage helps you know what data a website can keep on your device and how to manage it.

Concrete example

Imagine you are using an online note-taking app. When you type a draft, the app uses localStorage to save the text on your device. If you close the browser and come back the next day, the draft is still there because localStorage persists. If you open the same note in a new tab, the app might use sessionStorage to remember which note you were viewing while that tab is open, but it clears when you close that tab.

Common confusion

People often confuse web storage with cookies. Both store data on your device, but cookies are sent to the server with every HTTP request, while web storage data stays in the browser and is not automatically transmitted. Also, cookies have a size limit of about 4KB, whereas web storage typically allows around 5MB per domain. Another confusion is between localStorage and IndexedDB: IndexedDB is a more powerful, asynchronous database for larger amounts of structured data, while web storage is simpler and synchronous for small key-value pairs.

Related terms

cookies, IndexedDB, CacheStorage, Service Worker, client-side storage

Practical tips

Use web storage for storing small amounts of non-sensitive data on the client side, such as user preferences, form drafts, or theme settings. Choose localStorage for data that should persist across browser sessions, and sessionStorage for data that should be cleared when the tab closes. Remember that web storage is synchronous and can block the main thread, so avoid storing large amounts of data or performing heavy operations. Data in web storage is stored as strings, so you need to serialize objects using JSON.stringify() and parse them with JSON.parse(). Web storage is not secure for sensitive information like passwords or tokens, as it is accessible to any script on the same origin. Be aware that web storage is per-origin, meaning different subdomains or protocols have separate storage spaces.

Common questions

Array

Key takeaways

Web storage is a browser API that provides two mechanisms: localStorage and sessionStorage. It allows websites to store data as key-value pairs on the client side, with a typical limit of 5-10 MB per origin. Web storage is synchronous and only stores strings, so objects need to be serialized. It is not secure for sensitive information and is per-origin, meaning separate subdomains have separate storage. Unlike cookies, web storage data is not sent to the server with every request, reducing network overhead.

Step by step

1. Open your browser's developer console (F12) and navigate to the Application or Storage tab to see current web storage. 2. Use localStorage.setItem('key', 'value') to store a simple string, and then retrieve it with localStorage.getItem('key'). 3. To store an object, first convert it to a JSON string: localStorage.setItem('user', JSON.stringify({name: 'Alice'})); then parse it back with JSON.parse(localStorage.getItem('user')). 4. To remove a specific item, use localStorage.removeItem('key'); to clear all data, use localStorage.clear(). 5. Test sessionStorage the same way, but note that it clears when you close the tab. Remember that these methods are synchronous, so they block the script execution.

More context

Web storage was introduced in HTML5 and is supported by all modern browsers. It is defined by the WHATWG HTML specification and provides a larger storage capacity compared to cookies, which are limited to about 4 KB. Unlike cookies, web storage does not send data to the server automatically, which makes it more efficient for client-side data. However, it is subject to the same-origin policy, so data cannot be shared across different domains. Web storage is also distinct from IndexedDB, which is a more complex, asynchronous database for larger amounts of structured data.