JS STATE MANAGEMENT /// LOCALSTORAGE /// SESSIONSTORAGE /// COOKIES /// WEB STORAGE API /// JS STATE MANAGEMENT /// LOCALSTORAGE /// SESSIONSTORAGE ///

JavaScript Storage

Learn how to persist data in the browser using localStorage, sessionStorage, and cookies.

storage.js
1 / 12
12345
💾

Tutor:The web is stateless by default. If a user refreshes the page, any JavaScript variables are reset. To fix this, browsers give us Web Storage APIs to save data locally on the user's device.


Skill Matrix

UNLOCK NODES BY MASTERING APIS.

localStorage

Stores data persistently across sessions. The data is saved until explicitly deleted by the user or code.

System Check

Which method retrieves a value from localStorage?

Community Holo-Net

State Management Discussion

ACTIVE

Built a cool theme toggler using localStorage? Struggling with stale cookies? Join the chat.

Support Us

JavaScript Storage

Author

Pascual Vila

Fullstack Engineer // Code Syllabus

Modern web applications need to remember user state: dark mode preferences, items in a shopping cart, or login tokens. The Web Storage API provides mechanisms to store this data right in the browser.

localStorage

localStorage persists data indefinitely across browser sessions. Data stored here will not be deleted when the browser is closed. It is domain-specific, meaning your site cannot read the localStorage of another site.

  • localStorage.setItem('key', 'value'): Saves data.
  • localStorage.getItem('key'): Retrieves data. Returns null if it doesn't exist.
  • localStorage.removeItem('key'): Deletes a specific key.

sessionStorage

sessionStorage maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser tab is open). If you open multiple tabs of the same site, they will have different sessionStorage instances.

The JSON Trap

A critical limitation of the Web Storage API is that keys and values are always strings. If you try to pass an object like { user: "Alice" } to setItem, it gets converted to the useless string "[object Object]".

To store complex data structures, you must serialize them using JSON.stringify() before saving, and deserialize them using JSON.parse() upon retrieval.

What about Cookies?+

Before Web Storage, we used Cookies. Cookies are small pieces of data (up to 4KB) that are stored by the browser and automatically sent back to the server with every HTTP request.

While they are essential for server-side session management (like authentication tokens), they are generally avoided for pure client-side storage today because they slow down network requests and have a clunky API (`document.cookie`). Use `localStorage` or `sessionStorage` whenever the data only needs to be accessed by the frontend.

Storage Glossary

localStorage

Web API that stores data with no expiration date. Data persists across browser restarts.

snippet.js

sessionStorage

Web API that stores data for only one session. Data is lost when the browser tab is closed.

snippet.js

JSON.stringify()

Converts a JavaScript object or value to a JSON string, preparing it for Web Storage.

snippet.js

JSON.parse()

Parses a JSON string, constructing the JavaScript value or object described by the string.

snippet.js

document.cookie

Accessor to read and write cookies associated with the document. Limited to 4KB.

snippet.js

Storage.clear()

Removes all key/value pairs for the domain from the specific storage object.

snippet.js