Local storage permite a las webs guardar datos directamente en tu navegador para que se mantengan entre visitas. Descubre cómo funciona, para qué lo usan las webs y qué significa para tu sitio.
¿Alguna vez has elegido una preferencia en una web, has cerrado la pestaña y al volver más tarde lo has encontrado todo como lo dejaste? Tus ajustes de visualización seguían igual, tus elementos guardados seguían ahí y no tuviste que configurar nada de nuevo. Eso es local storage haciendo su trabajo en silencio, en segundo plano.
En el capítulo anterior sobre los tipos de almacenamiento del navegador, presentamos local storage como una de las principales formas en que los navegadores conservan datos. Este capítulo profundiza en qué es realmente local storage, cómo funciona y qué papel tiene en tu web.
¿Qué es local storage?
Local storage es un tipo de almacenamiento del navegador que permite a las webs guardar pequeños datos directamente en el dispositivo del visitante. Esos datos permanecen en el navegador incluso después de que el visitante cierre la pestaña o apague el ordenador. La próxima vez que visite la misma web, el navegador sigue teniendo esos datos disponibles y el sitio puede usarlos para restaurar su estado anterior.
Esto es lo que diferencia a local storage de session storage, que se borra al cerrar la pestaña. Local storage es persistente. No caduca automáticamente. Los datos permanecen hasta que el usuario limpia su navegador o hasta que la propia web los elimina.
¿Cómo funciona local storage?
Local storage funciona como un sencillo almacén de pares clave-valor. Piensa en una pequeña libreta dentro del navegador donde una web puede apuntar información con una etiqueta y un valor. La etiqueta es la clave y la información guardada bajo ella es el valor. Cuando la web necesita de nuevo esa información, busca la clave y recupera el valor.
Por ejemplo, una web puede guardar una clave llamada "theme" con el valor "dark" cuando un visitante cambia al modo oscuro. La próxima vez que ese visitante vuelva, la web consulta local storage, encuentra la clave "theme", lee el valor "dark" y aplica el modo oscuro automáticamente antes de que la página termine de mostrarse.
Cada web tiene su propio local storage aislado. Una web solo puede leer y escribir sus propios datos. No puede ver lo que haya guardado ninguna otra web. Este aislamiento es una medida de seguridad incorporada en todos los navegadores.
¿Para qué usan local storage las webs?
Guardar las preferencias del usuario
Los ajustes de visualización, las preferencias de idioma, la elección de tema y las opciones de diseño son cosas habituales que se guardan en local storage. Son preferencias no sensibles que mejoran la experiencia cuando el visitante vuelve.
Conservar elementos entre sesiones
Algunas webs usan local storage para guardar elementos con los que ha interactuado un visitante, como una lista de lectura, una lista de deseos o los elementos vistos recientemente, de modo que sigan ahí en la próxima visita aunque el visitante no haya iniciado sesión.
Reducir las solicitudes al servidor
Cuando una web guarda información en local, puede recuperarla al instante desde el navegador en lugar de hacer una solicitud al servidor cada vez. Esto acelera la experiencia de los visitantes que vuelven y reduce la carga del servidor.
Mantener el estado en formularios y procesos de varios pasos
Algunas webs usan local storage para guardar temporalmente el progreso de un formulario de varios pasos o de un proceso de compra. Si un visitante cierra la pestaña por accidente, no pierde su progreso cuando vuelve.
¿Cuáles son los límites de local storage?
Local storage está pensado para datos pequeños. La mayoría de los navegadores permiten entre 5 y 10 megabytes por web, que es más que suficiente para preferencias y ajustes, pero no para archivos grandes ni conjuntos de datos complejos. Además, solo guarda texto. Los números, objetos y listas deben convertirse primero a texto para guardarse y volver a convertirse al recuperarlos.
Local storage tampoco es el lugar adecuado para información sensible. Como es accesible para cualquier script que se ejecute en la página, guardar contraseñas, datos personales o datos de pago en local storage es un riesgo de seguridad. Los datos sensibles deben estar en el servidor, protegidos con SSL y una autenticación adecuada.
Para ver una comparación directa de local storage con los demás tipos de almacenamiento, lee tipos de almacenamiento del navegador.
Preguntas frecuentes
¿Funciona local storage sin conexión a internet?
Sí. Local storage se guarda en el dispositivo del visitante, no en un servidor. Los datos están disponibles incluso cuando el navegador está sin conexión. Es una de las razones por las que local storage se usa a menudo junto con service workers y cache storage para crear webs que funcionen parcial o totalmente sin conexión.
¿Se comparte local storage entre distintos navegadores del mismo dispositivo?
No. Local storage es específico de cada navegador. Si guardas datos en un navegador, no se ven en otro navegador del mismo dispositivo. Cada navegador mantiene su propio local storage. Esto significa que un visitante que cambie de un navegador a otro no se llevará consigo sus preferencias ni sus datos guardados.
¿Pueden los visitantes ver o borrar los datos de su local storage?
Sí. Cualquiera puede abrir las herramientas de desarrollo de su navegador y ver o borrar los datos de local storage de cualquier web. Los visitantes también pueden borrar todos los datos del navegador desde sus ajustes, lo que elimina por completo local storage. Esto significa que las webs no deben depender de local storage como una fuente de datos permanente o garantizada.
¿Qué diferencia hay entre local storage y las cookies?
Las cookies se devuelven al servidor con cada solicitud, lo que las hace adecuadas para la gestión de sesiones y la autenticación. Local storage permanece solo en el navegador y nunca se envía automáticamente al servidor. Local storage también guarda más datos que las cookies y no tiene caducidad incorporada. Cada uno sirve para casos de uso distintos, y las webs bien hechas usan ambos de forma adecuada.
¿Afecta local storage a la velocidad de la web?
Leer y escribir en local storage es muy rápido, así que rara vez causa problemas de velocidad apreciables. De hecho, usar local storage para guardar preferencias en caché y reducir las solicitudes al servidor puede hacer que una web se sienta más rápida para los visitantes que vuelven. El impacto en la velocidad de la web suele ser positivo cuando se usa con criterio.
¿Tengo que gestionar local storage en mi web?
Si usas un creador de webs, la plataforma gestiona local storage automáticamente para las funciones que admite. No tienes que escribir ni configurar nada tú mismo. El creador se encarga entre bastidores de las preferencias o la gestión de estado que usan local storage. Con el creador de webs de WEMASY, todo esto está integrado en el funcionamiento de la plataforma.