Una app web guarda datos con localStorage
El almacenamiento local (localStorage) es un lugar del navegador donde una página guarda pares de clave y valor. Los encuentra al volver aunque hayas cerrado la pestaña, y así la app recuerda lo que hiciste.
Piensa en una lista de la compra: si se borra al cerrar la app, no sirve. Con datos guardados en el dispositivo, sigue ahí al día siguiente.
Al terminar esta lección
Nota
Puedo guardar datos en el dispositivo y decir qué se puede perder.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| localStorage | un almacén de pares de clave y valor, en el navegador | |
| Clave | el nombre con el que se guarda y se busca un dato | "habitos" |
| Valor | el dato guardado, siempre como texto | |
| Límite de tamaño | la cantidad máxima de datos que el navegador deja guardar | |
| JSON | un formato de texto que escribe listas y objetos con corchetes y llaves |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
localStorage guarda texto con una clave
Con setItem se guarda un valor bajo una clave. Con getItem se lee. Si la clave no existe, getItem devuelve null, que quiere decir "nada".
El valor es siempre texto. Para guardar una lista, primero se convierte a texto con JSON.stringify. Al leerla, se vuelve a convertir con JSON.parse.
Guardar y leer una lista como JSON
const compra = ["leche", "pan", "huevos"];
localStorage.setItem("compra", JSON.stringify(compra));
const texto = localStorage.getItem("compra");
const lista = JSON.parse(texto || "[]");
console.log(lista.length);La app del laboratorio ya usa localStorage
La app de hábitos guarda su lista en localStorage, y por eso sigue ahí al recargar la página. Este comando cuenta las líneas de su app.js que nombran localStorage.
Son la línea del comentario, la que lee y la que escribe. Es un comando de Linux, así que lo que imprime es un número.
Contar las líneas que nombran localStorage
docker exec jupyter grep -c localStorage app/app.jsSe muestra aquí y no se ejecuta. Crea una cuenta gratuita para pulsar Ejecutar y escribirlo en el terminal de tu propio laboratorio.
Hay otros almacenes para otros trabajos
sessionStorage funciona igual, pero se vacía al cerrar la pestaña. IndexedDB es una base de datos del navegador, para muchos datos y datos con estructura. La caché del service worker guarda archivos.
Para una lista corta de hábitos, localStorage basta. Para fotos o miles de registros, no.
El espacio es limitado y no está garantizado
Cada dirección web tiene un espacio propio de alrededor de unos pocos megabytes en localStorage. La cifra exacta cambia entre navegadores. Si te pasas, setItem falla con un error.
Además, los datos pueden perderse. El usuario puede borrar los datos del sitio. Una pestaña privada los olvida al cerrarse. Con poco espacio libre, el navegador puede limpiar el almacenamiento.
Ejemplo resuelto: qué se conserva y qué no
| Situación | ¿Siguen los datos? | Por qué |
|---|---|---|
| Cierras y abres la app | Sí | localStorage no se borra al cerrar |
| Abres la app en otro móvil | No | Los datos están en un solo dispositivo |
| Borras los datos del sitio | No | El usuario ha pedido borrarlos |
| Usas una pestaña privada | No, normalmente | Se olvidan al cerrar la pestaña |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Un error frecuente
Advertencia
Mucha gente cree que lo guardado en localStorage está a salvo para siempre. No lo está: vive en un solo dispositivo y el usuario o el navegador pueden borrarlo. Guarda ahí lo cómodo, como preferencias y borradores, y lo importante, en un servidor.