JS MASTER CLASS /// PERSIST DATA /// LOCALSTORAGE /// SESSIONSTORAGE /// COOKIES /// WEB STORAGE API /// JS MASTER CLASS ///

JavaScript Storage API

Learn how to remember the user. Store data in the browser persistently using localStorage, sessionStorage, and cookies.

storage.js
1 / 11
12345
🗄️

Tutor:JavaScript needs a way to remember data after the user refreshes the page. We have three main client-side options: localStorage, sessionStorage, and Cookies.


Skill Matrix

UNLOCK NODES BY MASTERING STORAGE APIS.

Concept: localStorage

Data stored in localStorage has no expiration. It stays until explicitly cleared by the user or code.

System Check

What happens to localStorage data when you restart your computer?

Community Holo-Net

Discuss Storage Tactics

ACTIVE

Got an edge case about XSS security with Cookies vs LocalStorage? Share your thoughts.

Support Us

JavaScript Storage & Cookies

Author

Pascual Vila

Fullstack Instructor // Code Syllabus

HTTP is stateless. That means every time you load a page, the browser starts fresh. To remember user preferences, sessions, or cart items, we need persistent memory in the client's browser.

localStorage

The localStorage object allows you to save key/value pairs in the browser. The data saved in localStorage has no expiration date, meaning it survives browser restarts. You get roughly 5MB of space.

// Save data
localStorage.setItem("theme", "dark");

// Read data
let theme = localStorage.getItem("theme");

sessionStorage

sessionStorage uses the exact same API as localStorage, but data is only persisted until the window or tab is closed. It's perfect for multi-page forms or state that you only need during the current session.

Cookies

Cookies are older, smaller (4KB max), but very powerful because they are automatically sent to the server with every HTTP request. This makes them the standard for handling authentication sessions. Setting them in JavaScript is done via the document.cookie string.

Security Warning: XSS+

Never store highly sensitive information (like passwords) in localStorage. Any JavaScript running on your page (even malicious code injected via Cross-Site Scripting - XSS) can access localStorage. For auth tokens, HttpOnly cookies are much safer as they are invisible to JS.

Storage Glossary

localStorage

Stores data with no expiration date. Data is not deleted when the browser is closed.

snippet.js

sessionStorage

Stores data for one session. The data is deleted when the browser tab is closed.

snippet.js

Cookies

Small text files sent to the server on every request. Ideal for Auth sessions. Handled via document.cookie.

snippet.js

JSON.stringify()

Converts a JavaScript object or array into a JSON string, required before saving to Web Storage APIs.

snippet.js

JSON.parse()

Parses a JSON string back into a JavaScript object or array. Used immediately after retrieving an object from Storage.

snippet.js

Web Storage API

The overarching API that provides mechanisms by which browsers can store key/value pairs (localStorage & sessionStorage).

snippet.js