Sanfeliu
  1. Apunts
  2. JavaScript
  3. Lliçó 14 de 14

Emmagatzematge al navegador: localStorage, sessionStorage i cookies

Com guardar dades al navegador amb localStorage, sessionStorage i cookies: en què es diferencien, com es fan servir i quan convé cadascun.

Introducció

Antigament, les aplicacions web depenien del servidor per guardar dades, fet que implicava més latència i una pitjor experiència d'usuari. Avui dia, el navegador ens ofereix eines potents per emmagatzemar dades localment, fent les apps més ràpides i eficients.

Avantatges d'emmagatzemar al navegador

  • Velocitat: Accés directe a les dades, sense demanar-les al servidor.
  • 📉 Menys càrrega al servidor: Dades que no canvien sovint poden quedar-se al client.
  • 😀 Millor UX: Manté l’estat de l’app encara que es recarregui la pàgina.

Eines d'emmagatzematge local

Eina Persistència Visibilitat Mida S’envien al servidor
LocalStorage Permanent (fins que s'esborri) Totes les pestanyes del domini Gran ❌ No
SessionStorage Només mentre dura la sessió Només la pestanya actual Gran ❌ No
Cookies Depèn de la caducitat definida Compartit entre pestanyes Petita (~4KB) ✅ Sí

LocalStorage

LocalStorage és una API web que guarda dades persistents en el navegador. Ideal per recordar configuracions d’usuari, temes, formularis, etc.

Exemple bàsic:

// Guardar
localStorage.setItem("nom", "Joan");

// Recuperar
const nom = localStorage.getItem("nom");

// Eliminar
localStorage.removeItem("nom");

// Esborrar-ho tot
localStorage.clear();

Només admet cadenes. Si vols guardar un array o objecte:

const usuari = { nom: "Joan", edat: 30 };
localStorage.setItem("usuari", JSON.stringify(usuari));

SessionStorage

Igual que el LocalStorage, però les dades desapareixen quan tanques la pestanya. Ideal per a estats temporals, com un formulari en procés.

Exemple bàsic:

sessionStorage.setItem("tema", "fosc");
const tema = sessionStorage.getItem("tema");
sessionStorage.removeItem("tema");
sessionStorage.clear();

Cookies

Les cookies són fragments de dades que sí s’envien al servidor amb cada petició HTTP.

Característiques:

  • Ideals per a tokens d'autenticació
  • Pot tenir data de caducitat
  • Associades a un domini i ruta

Exemple:

document.cookie = "nom=Joan; expires=Sun, 24 Jul 2025 23:59:59 UTC; path=/";

Comparativa

Característica LocalStorage SessionStorage Cookies
Persistència ✅ Sí ❌ Només sessió ✅ Opcional
Enviades al servidor ❌ No ❌ No ✅ Sí
Capacitat Fins a 5-10MB Fins a 5-10MB Fins a 4KB
Format suportat Només string Només string Només string

Exemples d’ús pràctic

Carret de la compra

  • LocalStorage o SessionStorage per mantenir els productes encara que tanquem o recarreguem la pàgina

Formularis temporals

  • Guardar temporalment les dades en LocalStorage o SessionStorage

Preferències d'usuari

  • Tema clar/fosc, idioma → LocalStorage

Sessió d'usuari

  • Cookies amb token d'autenticació i caducitat

Vista personalitzada

  • Llista vs quadrícula, amb cookies

Activitat proposada

Crea una interfície web que guardi les preferències de l'usuari (tema, idioma...) fent servir LocalStorage.

Passos:

  1. Desenvolupa l'HTML i CSS de la UI
  2. Implementa el comportament amb script.js
  3. Guarda automàticament les opcions triades

Recursos útils