Intermediojavascript
Almacenamiento Web: LocalStorage, SessionStorage e IndexedDB
Aprende a persistir datos en el navegador del cliente de forma eficiente, segura y optimizada.
LocalStorage vs SessionStorage
Ambas APIs almacenan pares clave-valor como cadenas de texto (límite aproximado de 5MB).
localStorage persiste indefinidamente hasta que el usuario o el código lo borre, mientras que sessionStorage se elimina al cerrar la pestaña.javascript
1// Guardar objeto serializado en LocalStorage
2const usuario = { id: 101, tema: "dark", racha: 5 };
3localStorage.setItem("user_profile", JSON.stringify(usuario));
4
5// Recuperar y parsear
6const guardado = localStorage.getItem("user_profile");
7if (guardado) {
8 const parsed = JSON.parse(guardado);
9 console.log(parsed.tema); // "dark"
10}
11
12// Eliminar
13localStorage.removeItem("user_profile");
14localStorage.clear(); // Borra todo el almacenamiento del dominioIndexedDB para grandes volúmenes de datos
Para almacenar megabytes o gigabytes de datos complejos, archivos binarios o índices transaccionales en el cliente, se utiliza IndexedDB, una base de datos NoSQL asíncrona integrada en todos los navegadores modernos.
javascript
1// IndexedDB es completamente asíncrono y no bloquea el hilo visual
2const request = indexedDB.open("AurumDatabase", 1);
3request.onupgradeneeded = (e) => {
4 const db = e.target.result;
5 db.createObjectStore("cursos", { keyPath: "id" });
6};Prueba lo aprendido
Escribe código y ejecútalo directamente en el navegador.
Live Sandbox (JAVASCRIPT)
Output