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.

    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.

    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:

    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().

    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.

    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.

    驴Puede pensar en formas de mejorar su aplicaci贸n con LocalStorage?

    .

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *