Prueba localStorage en un entorno en vivo y copia ejemplos que funcionan para preferencias guardadas, un carrito y un tema, además de manejo de JSON, límites de tamaño, errores y sincronización entre pestañas.
localStorage es un almacén de claves y valores del navegador, separado por origen, que conserva los datos después de cerrar la pestaña y el navegador. Usas setItem(key, value) para guardar, getItem(key) para leer, removeItem(key) para borrar y clear() para vaciarlo. Los valores siempre son cadenas, así que envuelve los objetos en JSON.stringify y JSON.parse.
Toda la API Storage en una tarjeta
La mayoría de los errores con localStorage vienen de tres sorpresas: todo se convierte en cadena, la llamada puede lanzar una excepción y los datos están ligados a un único origen exacto. El entorno de pruebas de abajo escribe en tu propio navegador para que veas esas reglas en acción, y luego los ejemplos muestran patrones seguros para preferencias, un carrito de compra y un cambio de tema.
MDN documenta un límite de 5 MiB de localStorage por origen en los navegadores actuales, con otros 5 MiB aparte para sessionStorage. Las cadenas se guardan en UTF-16, así que la cantidad de caracteres que caben es menor de lo que sugiere el número de bytes. Escribir por encima del límite lanza un QuotaExceededError.
No. Las entradas se quedan hasta que tu código las elimina o el visitante borra los datos del sitio. En una ventana privada, el navegador las borra cuando se cierra la última pestaña privada. Si necesitas caducidad, guarda una marca de tiempo con el valor y compruébala al leer.
setItem convierte en cadena todo lo que le pasas. Un objeto simple se convierte en el texto [object Object] y los datos se pierden. Guarda JSON.stringify(obj) y léelo de vuelta con JSON.parse.
No. El almacenamiento pertenece a un origen, que es el esquema, el host y el puerto juntos. http://example.com y https://example.com tienen cada uno su propio almacén separado, y lo mismo ocurre con los subdominios.
Escucha el evento storage en window. Se dispara en los demás documentos abiertos del mismo origen cuando uno de ellos cambia un valor, e incluye key, oldValue y newValue. La pestaña que hizo el cambio no lo recibe.
Las cookies viajan al servidor con cada petición y sirven para sesiones. localStorage nunca sale del navegador, guarda más y sirve para el estado de la interfaz, como un tema, un borrador o una barra lateral contraída.
Elige el almacén según cuánto deben durar los datos y quién los necesita
Un solo sitio gestiona el almacenamiento bloqueado, la cuota llena y el JSON roto, para que el resto de tu código nunca tenga que hacerlo.
Los valores por defecto se combinan con lo que se haya guardado, así que añadir un ajuste nuevo más adelante no rompe los datos guardados antes.
Cada cambio crea un array nuevo y lo vuelve a escribir. El servidor sigue decidiendo los precios al pagar.
Si no hay nada guardado, gana el ajuste del sistema operativo. Ejecuta esto pronto en el head para evitar un destello del tema equivocado.
localStorage no tiene caducidad integrada, así que guarda la fecha límite con el valor y descarta las entradas caducadas al leer.
El evento storage llega a todas las demás pestañas del mismo origen, así que el indicador de un carrito puede actualizarse sin recargar.
El almacenamiento está bloqueado en este navegador, así que cada llamada lanzaría una excepción. Tu código necesita una alternativa.
Lanzó {name}: {message}
Escribe primero una clave.
{call} guardó {n} caracteres.
{call} devolvió null: no hay ninguna entrada con esa clave.
JSON.parse devolvió: {value}
El texto guardado no es JSON: {value}
{call} devolvió la cadena {value}
{call} hecho.
Se eliminaron {n} entradas del entorno de pruebas. Las demás claves de este sitio no se tocaron.
Guarda, lee y borra entradas en tu propio navegador y ve todas las claves que guarda este sitio. Las claves del entorno de pruebas empiezan por demo: para que nunca choquen con las del sitio.
Clave
Valor
Tipo de valor
Cadena simple
Objeto (JSON)
Guardar
Leer
Borrar
Borrar claves del entorno de pruebas
Los resultados aparecen aquí.
Entradas del entorno de pruebas guardadas en tu navegador ({n})
Cadena guardada
Empieza gratis · Sin tarjeta de crédito