Emmagatzematge al navegador: LocalStorage, SessionStorage i Cookies
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:
- Desenvolupa l'HTML i CSS de la UI
- Implementa el comportament amb
script.js - Guarda automàticament les opcions triades