Almacenamiento de datos en el navegador con LocalStorage

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

Las cookies son datos textuales 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 de las cookies se almacenan como pares de cadenas de clave / valor.

Todas las cookies se envían al servidor cuando se realiza una solicitud HTTP. Las cookies que crea 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 inadvertidamente una cookie, lo que hace que su aplicación cliente se comporte de forma inesperada.

Con las cookies, solo puede almacenar un máximo de 4 KB de datos en el cliente. Para las aplicaciones frontales 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 proporcionan las cookies.

¿Qué es LocalStorage?

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://www.Pharos.sh.com es independiente de LocalStorage utilizado por https://www.reddit.com.

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

Te puede interesar:Agregar una base de datos PostgreSQL a una aplicación Node.js en Heroku

Tener LocalStorage disponible por dominio evita que 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 de LocalStorage no tienen fecha de caducidad. Se puede eliminar mediante JavaScript o borrando la memoria caché del navegador.

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

Cómo utilizar LocalStorage

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

Descripción del método

setItem()	Agregar clave / valor en LocalStorage
getItem()	Obtenga un valor de LocalStorage
removeItem()	Eliminar artículo por su clave
clear()	Eliminar todos los elementos de LocalStorage
key()	Obtener una clave de un artículo de LocalStorage

setItem ()

Utilizar el setItem() función para almacenar un artículo 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 localStorage:

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

obtiene el objeto()

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

Te puede interesar:Comentario de código en JavaScript: tipos y mejores prácticas

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

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

Su consola debería imprimir «JavaScript».

remover el artículo()

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

Pruebe esto en su consola para eliminar los datos guardados con setItem():

localStorage.removeItem("tech");

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

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

La consola generaría «nulo» como getItem() devoluciones null siempre que no pueda recuperar un artículo.

claro()

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

localStorage.clear();

llave()

los key() La función 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 deberíamos usar el índice para recuperar claves directamente. Sin embargo, podemos usar esta función para almacenar todas las claves en LocalStorage:

Te puede interesar:JavaScript: compruebe si la matriz incluye un valor / elemento

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

Usando el length propiedad 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 LocalStorage

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

Vamos a crear un person objeto en la consola de su navegador y guárdelo en LocalStorage:

let person = {
    name: "John",
    age: 22
};

localStorage.setItem("profile", person);

Ahora, setItem() hubiera convertido el person objeto a una String. Cuando recuperamos el person Me gusta esto:

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

La consola de nuestro navegador mostraría esto:

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

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

Usamos el incorporado JSON.stringify() función 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().

Te puede interesar:Guía de cierres de JavaScript

Salvemos el person objeto después de encadenarlo:

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

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

Comencemos tomando el artículo de LocalStorage:

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:

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:

Tenga en cuenta la diferencia de color en la consola cuando registramos la cadena por primera vez y cuando registramos el objeto. También registramos el name propiedad de person para garantizar que las propiedades del objeto sigan siendo 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 LocalStorage

LocalStorage permite la persistencia básica en su sitio web. Se usa comúnmente para guardar datos que serían convenientes para que el usuario los vea, 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 las preferencias del usuario, LocalStorage les permite seguir usando su sitio web con sus personalizaciones.

Te puede interesar:JavaScript: cómo insertar elementos en un índice específico de una matriz

Sin embargo, LocalStorage no debe usarse para grandes cantidades de datos. Aparte del límite de 5 MB, que puede no ser suficiente para 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 LocalStorage antes de que pueda ejecutar otro código.

Tenga en cuenta que el costo de rendimiento aumenta al guardar objetos JSON grandes. los JSON.stringify() y JSON.parse() Las funciones también son sincrónicas. Bloquearán la ejecución de JavaScript hasta que estén completos.

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 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 de clave / valor, y cada dominio tiene acceso a su LocalStorage.

Al almacenar objetos 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 más importante es asegurarse de que no se almacenen datos confidenciales de usuarios o aplicaciones en LocalStorage.

Te puede interesar:Orden de selección en JavaScript

¿Puede pensar en formas de mejorar su aplicación con LocalStorage?

.