Almacenamiento de datos en el navegador con LocalStorage

LocalStorage nos permite almacenar datos sin comunicarnos con un servidor back-end. En este artículo, almacenaremos datos con cookies y LocalStorage y los recuperaremos.

Introducción

En los primeros días de la web, la persistencia de datos solo era posible con un servidor. Hoy en día, mediante el uso de LocalStorage, podemos almacenar datos en clientes como navegadores y aplicaciones móviles sin comunicarnos con una aplicación de back-end.

En este artículo, analizaremos cómo los desarrolladores pueden almacenar datos en el cliente con cookies y cómo LocalStorage mejoró esa experiencia. Luego veremos las funciones que almacenan y recuperan datos de LocalStorage. Finalmente, discutiremos cuándo es apropiado usar LocalStorage.

Almacenamiento de datos en el navegador con cookies {#almacenamiento de datos en el navegador con cookies}

Las cookies son datos de texto almacenados en el cliente. Tradicionalmente, los establece el servidor, sin embargo, también se pueden crear con código JavaScript en el navegador. Los datos en las cookies se almacenan como pares de cadenas clave/valor.

Todas las cookies se envían al servidor cuando se realiza una solicitud HTTP. Las cookies que haga con JavaScript también se enviarán al servidor cuando se realice una solicitud HTTP. Esto significa que la aplicación del servidor puede modificar una cookie sin darse cuenta, lo que hace que la aplicación del cliente se comporte de forma inesperada.

Con las cookies, solo puede almacenar un máximo de 4 KB de datos en el cliente. Para aplicaciones front-end modernas, esto puede no ser suficiente.

Veamos cómo LocalStorage nos permite crear y mantener datos en el lado del cliente, con mucho más espacio de almacenamiento que el que brindan las cookies.

¿Qué es el almacenamiento local?

LocalStorage es un almacén de datos de clave/valor que está disponible en el navegador de un usuario. Al igual que las cookies, LocalStorage solo puede almacenar datos de cadena para sus claves y valores. El almacén de datos solo es accesible para JavaScript dentro de ese dominio.

Nota: Cada dominio tiene acceso a su almacén de datos LocalStorage. Por ejemplo, LocalStorage utilizado por https://wikihtp.com es independiente del LocalStorage utilizado por https://www.reddit.com.

Los subdominios y los diferentes protocolos HTTP (HTTP y HTTPS) tienen almacenes de datos independientes. Por ejemplo, el LocalStorage utilizado por https://my.example.com está completamente separado de https://example.com. Del mismo modo, el LocalStorage de https://twitter.com está separado de http://twitter.com.

Tener LocalStorage disponible por dominio evita que el JavaScript malicioso alojado en otros sitios web manipule o lea los datos de nuestros clientes que utiliza nuestro dominio.

Cada dominio puede almacenar hasta 5 MB de datos en LocalStorage. Además, nuestros datos no se envían al servidor cuando se realiza una solicitud HTTP.

Los datos en LocalStorage no tienen fecha de caducidad. Se puede eliminar a través de JavaScript o limpiando la memoria caché del navegador.

Ahora que sabemos qué es LocalStorage, usemos su API para administrar datos en el navegador.

Cómo usar el almacenamiento local

Podemos usar los siguientes métodos en el objeto localStorage global para administrar los datos del lado del cliente:

Descripción del método


setItem() Añadir clave/valor en LocalStorage getItem() Obtiene un valor de LocalStorage removeItem() Elimina el elemento por su clave clear() Eliminar todos los elementos de LocalStorage key() Obtener una clave de un elemento de LocalStorage

establecer elemento()

Utilice la función setItem() para almacenar un elemento en LocalStorage. Esta función toma una clave como primer argumento y un valor como segundo argumento. Como se mencionó anteriormente, ambos deben ser cadenas.

En la consola de su navegador, agreguemos un elemento a nuestro almacenamiento local:

1
localStorage.setItem("tech", "JavaScript");

obtiene el objeto()

Utilice la función getItem() para recuperar datos de LocalStorage. Esta función toma la clave que se usó al guardar los datos como argumento.

En su consola, recuperemos e imprimamos el valor que se guardó previamente con setItem():

1
2
let techStack = localStorage.getItem("tech");
console.log(techStack);

Su consola debería imprimir "JavaScript".

remover el artículo()

Utilice la función removeItem() para eliminar un elemento de LocalStorage. Debe proporcionar la clave del elemento que desea eliminar como argumento.

Prueba esto en tu consola para borrar los datos guardados con setItem():

1
localStorage.removeItem("tech");

Para confirmar que se eliminó, intente recuperarlo una vez más:

1
console.log(localStorage.getItem("tech"));

La consola mostraría "null" ya que getItem() devuelve null cada vez que no puede recuperar un elemento.

claro()

Para eliminar todos los datos almacenados en LocalStorage, utilice la función clear():

1
localStorage.clear();

llave()

La función key() nos permite recuperar la clave de un elemento guardado en LocalStorage por su índice. El navegador crea un índice entero para cada elemento agregado a LocalStorage.

Como no generamos este índice, no debemos usarlo para recuperar claves directamente. Sin embargo, podemos usar esta función para obtener todas las claves almacenadas en LocalStorage:

1
2
3
4
for (let i = 0; i < localStorage.length; i++) {
    let storedValue = localStorage.key(i);
    console.log(`Item at ${i}: ${storedValue}`);
}

Al usar la propiedad longitud de LocalStorage, iteramos sobre cada índice creado para imprimir todas las claves que hemos guardado en LocalStorage. Luego podemos usar estas claves con getItem() para recuperar todos los datos almacenados.

Ahora que hemos cubierto todas las funciones para administrar datos en el navegador del usuario, veamos el caso especial de guardar objetos complejos en lugar de datos de cadena.

Almacenamiento de objetos en almacenamiento local

LocalStorage solo puede usar cadenas para sus claves y valores. Si intentamos almacenar cualquier otro tipo de datos, lo convierte en una cadena antes de almacenarlo. Esto puede traer algún comportamiento inesperado cuando queremos guardar objetos de JavaScript.

Vamos a crear un objeto persona en la consola de su navegador y guardarlo en LocalStorage:

1
2
3
4
5
6
let person = {
    name: "John",
    age: 22
};

localStorage.setItem("profile", person);

Ahora, setItem() habría convertido el objeto persona en una cadena. Cuando recuperamos la persona así:

1
console.log(localStorage.getItem("profile"));

La consola de nuestro navegador mostraría esto:

Naively store an object in LocalStorage

La conversión de objeto a cadena de JavaScript produce [objeto Objeto]. Es cierto que no es útil recuperar una cadena que solo indica que se almacenó un objeto.

Para almacenar correctamente objetos de JavaScript en LocalStorage, primero debemos convertir nuestro objeto en una cadena JSON.

Usamos la función integrada JSON.stringify() para esto. La cadena resultante de esa función contendrá todas las propiedades de nuestro objeto JSON. Guardamos la salida de esa función cuando usamos setItem().

Guardemos el objeto persona después de encadenarlo:

1
localStorage.setItem("profile", JSON.stringify(person));

Para recuperar estos datos como un objeto necesitamos hacer dos cosas. Primero, necesitamos usar getItem() para extraerlo de LocalStorage. Luego necesitamos convertir la cadena JSON en un objeto JavaScript.

Comencemos tomando el elemento de LocalStorage:

1
2
let storageProfileString = localStorage.getItem("profile");
console.log("String saved in LocalStorage", storageProfileString);

Ahora, convierta la cadena LocalStorage en un objeto con JSON.parse() y regístrelo en la consola del navegador:

1
2
3
let savedPerson = JSON.parse(storageProfileString);
console.log("Person object:", savedPerson);
console.log("Person's name:", savedPerson.name);

Ejecutar este código le dará el siguiente resultado:

Correctly store an object in LocalStorage

Tenga en cuenta la diferencia de color en la consola cuando registramos la cadena por primera vez cuando registramos el objeto. También registramos la propiedad nombre de persona para garantizar que las propiedades del objeto aún sean accesibles.

Ahora que tenemos una estrategia para expandir los usos de LocalStorage más allá de las cadenas, analicemos las mejores prácticas al usarlo.

Cuándo usar el almacenamiento local

LocalStorage permite la persistencia básica en su sitio web. Se usa comúnmente para mantener datos que serían convenientes para que el usuario los viera incluso si se actualizó el navegador. Por ejemplo, muchos formularios guardan la entrada de un usuario en LocalStorage hasta que se envía.

Los sitios web estáticos suelen utilizar LocalStorage para almacenar las preferencias del usuario, como un tema de interfaz de usuario. Sin un servidor web y una base de datos para guardar una preferencia de usuario, LocalStorage les permite continuar usando su sitio web con sus personalizaciones.

Sin embargo, LocalStorage no debe usarse para grandes cantidades de datos. Además del límite de 5 MB, que puede no ser suficiente para las aplicaciones con uso intensivo de datos, los datos grandes conllevan un costo de rendimiento cuando se usa LocalStorage.

Todas las funciones de LocalStorage son operaciones sincrónicas. Por lo tanto, si está guardando o recuperando una gran cantidad de datos, JavaScript debe completar esa operación de LocalStorage antes de que pueda ejecutar otro código.

Tenga en cuenta que el costo de rendimiento aumenta al guardar objetos JSON de gran tamaño. Las funciones JSON.stringify() y JSON.parse() también son sincrónicas. Bloquearán la ejecución de JavaScript hasta que se completen.

Nunca almacene información confidencial en LocalStorage. Esto incluye contraseñas, claves API, tokens de autenticación como JWT e información financiera como números de tarjetas de crédito, por nombrar algunos.

Recuerde, cada archivo JavaScript que se carga en su dominio tiene acceso a LocalStorage. Si usted o sus dependencias agregan código JavaScript malicioso, pueden recuperar datos de usuario o tokens que usa para autenticarse con las API.

Mantenga siempre los datos confidenciales en el back-end.

Conclusión

LocalStorage es un almacén de datos disponible en los navegadores. Los datos se almacenan como pares de cadenas clave/valor, y cada dominio tiene acceso a su LocalStorage.

Al almacenar objetos de JavaScript, asegúrese de convertirlos correctamente en una cadena con JSON.stringify() antes de guardar. A medida que recupera los datos, conviértalos en un objeto con JSON.parse().

Cuando utilice LocalStorage, evite procesar grandes cantidades de datos, ya que podría degradar el rendimiento porque sus funciones son sincrónicas. Lo que es más importante, asegúrese de que no se almacenen datos confidenciales de usuarios o aplicaciones en LocalStorage.

¿Se te ocurren formas de mejorar tu aplicación con LocalStorage?