Web Storage: localStorage, sessionStorage, and Cookies

Web Storage Overview

Modern web browsers offer several ways to store data on the client side. The most common are localStorage, sessionStorage, and Cookies.

localStorage

localStorage stores data with no expiration date. It remains even after the browser is closed.

// Set an item
localStorage.setItem('theme', 'dark');

// Get an item
const theme = localStorage.getItem('theme');

sessionStorage

Similar to localStorage, but data is cleared when the page session ends (when the tab is closed).

Cookies

Cookies are older and are primarily used for reading server-side session data. They are sent with every HTTP request.

Summary

Use localStorage for persistent settings, sessionStorage for temporary state, and Cookies for authentication tokens.