Obtener, establecer y eliminar elementos

Tanto localStorage como sessionStorage exponen los mismos cuatro métodos principales: getItem(key), setItem(key, value), removeItem(key) y clear(). Son almacenes sencillos de pares clave-valor respaldados por el navegador.

localStorage.setItem("theme", "dark") persiste una cadena bajo la clave "theme". Tanto la clave como el valor deben ser cadenas; los valores que no sean cadenas se convierten mediante String() antes de almacenarse, lo que corrompe silenciosamente los objetos y las matrices.

Para almacenar datos estructurados, serialícelos con JSON: localStorage.setItem("user", JSON.stringify(user)). Para leerlos, use: const user = JSON.parse(localStorage.getItem("user")). Incluya siempre el análisis en un bloque try/catch por si el valor almacenado tiene un formato incorrecto.

getItem("missing") devuelve null cuando la clave no existe; nunca devuelve undefined. Use el operador de coalescencia nula para proporcionar valores predeterminados: const theme = localStorage.getItem("theme") ?? "light".

También puede usar la notación de corchetes y de punto: localStorage.theme = "dark" y localStorage["theme"]. Ambas funcionan, pero ocultan la intención; prefiera las llamadas explícitas a los métodos, que comunican claramente que se trata de almacenamiento persistente y no de una propiedad de objeto.

localStorage.removeItem("theme") elimina una sola clave. localStorage.clear() borra todas las claves del origen actual. clear() es destructivo; no lo llame nunca sin un motivo de peso, ya que elimina los datos establecidos por todos los scripts de la página.

Use localStorage.length y localStorage.key(index) para recorrer todas las claves almacenadas, o expanda Object.keys(localStorage). Esto resulta útil para migraciones, depuración y limpieza basada en prefijos, como eliminar todas las claves que comiencen por "cache:".

Los navegadores asignan aproximadamente entre 5 y 10 MB por origen. Superar la cuota produce un error QuotaExceededError. Incluya setItem en un bloque try/catch cuando almacene valores potencialmente grandes, como cachés de imágenes o borradores de documentos, para evitar que el error bloquee la aplicación.

El almacenamiento se comparte en todo el origen. Prefije las claves con el nombre de la aplicación o de la funcionalidad (app:settings, cart:items) para evitar colisiones con otros scripts, bibliotecas de terceros y extensiones del navegador que se ejecuten en el mismo origen.

La API Storage es completamente síncrona: cada llamada bloquea el hilo principal hasta que se completan las operaciones de E/S del disco. Evite almacenar blobs muy grandes o llamar a setItem dentro de bucles estrechos; agrupe las actualizaciones en un único objeto serializado.

La misma superficie de API, pero con distinta duración. sessionStorage se borra al cerrar la pestaña; localStorage persiste entre reinicios del navegador. Elija sessionStorage para el estado efímero de un asistente y localStorage para las preferencias del usuario que deban sobrevivir a una actualización.

¿Qué devuelve localStorage.getItem("missing-key") cuando la clave nunca se ha establecido?

getItem, setItem, removeItem y clear son los cuatro pilares de Web Storage. Los valores siempre son cadenas, por lo que debe envolver los datos estructurados con JSON. Tenga en cuenta los valores null, QuotaExceededError y los espacios de nombres para compartir el origen correctamente con otros scripts.