Introducción
Los localStorage sessionStorage, parte de la API de almacenamiento web, son dos grandes herramientas para guardar pares clave /valor localmente. El uso de localStorage y sessionStorage para el almacenamiento es una alternativa al uso de cookies y tiene algunas ventajas:
- Los datos solo se guardan localmente y el servidor no puede leerlos, lo que elimina el problema de seguridad de las cookies.
- Le permite guardar muchos más datos (10 MB para la mayoría de los navegadores).
- La sintaxis es simple.
También es compatible con todos los navegadores modernos, por lo que puede usarlo hoy sin ningún problema. Las cookies siguen siendo útiles, especialmente cuando se trata de autenticación, pero hay ocasiones en las que localStorage o sessionStorage pueden ser una mejor alternativa.
Prerrequisitos
Para completar este tutorial, necesitará lo siguiente:
- La última versión de Node instalada en su máquina. Para instalar Node, lea los tutoriales en esta página.
- Conocimientos básicos de la codificación JavaScript.
Comprensión de localStorage y sessionStorage
localStorage y sessionStorage son casi idénticos y tienen la misma API. La diferencia es que con sessionStorage los datos se guardan solo hasta que se cierra la ventana o pestaña. Con localStorage, los datos se retienen hasta que el usuario borra la caché del navegador manualmente o hasta que la aplicación web borra los datos. Este tutorial presenta localStorage, pero la sintaxis de sessionStorage es la misma.
Con este conocimiento, ahora puede crear, leer y actualizar pares clave /valor en localStorage.
Crear, leer y actualizar entradas
Puede crear entradas para el localStorage utilizando el método setItem() El setItem() toma dos argumentos, la key y el valor correspondiente:
let key = 'Item 1';
localStorage.setItem(key, 'Value');Para leer las entradas, use el método getItem() El getItem() toma un argumento que debe ser la clave. Esta función devolverá el valor correspondiente como una cadena:
let myItem = localStorage.getItem(key);Este código establece myItem igual a 'Value', que es el valor correspondiente para la key.
La actualización de un elemento se realiza con el método setItem() Nuevamente, se necesitan dos argumentos. El argumento clave será una clave existente mientras que el argumento valor será un valor nuevo:
localStorage.setItem(key, 'New Value');Ahora, el valor de localStorage key es 'New Value' lugar de 'Value'.
Puede crear, leer y actualizar entradas en el objeto localStorage También puede eliminar entradas individuales y eliminar todas las entradas en formato localStorage
Eliminar y eliminar y entradas
Puede eliminar un elemento con el método removeItem() El removeItem() acepta un argumento que será una clave del objeto localStorage
localStorage.removeItem(key);También puede eliminar todos los elementos en localStorage. Esto se puede hacer con el método clear()
A continuación, se explica cómo borrar todo lo almacenado en localStorage:
localStorage.clear();Estos métodos le brindan la posibilidad de eliminar y eliminar elementos de localStorage rápidamente. Sin embargo, existen algunas limitaciones con localStorage. Tanto localStorage como sessionStorage solo pueden almacenar cadenas. Para solucionar este problema, deberá utilizar métodos JSON.
Almacene valores que no sean cadenas con JSON
localStorage solo puede almacenar valores de cadena. Si desea almacenar objetos o matrices como valores en localStorage, puede usar JSON.stringify() para convertirlos en cadenas. Al crear o actualizar pares clave /valor en localStorage, use JSON.stringify() con el objeto o la matriz como argumento:
let myObj = { name: 'Skip', breed: 'Labrador' };
localStorage.setItem(key, JSON.stringify(myObj));Aunque myObj es un objeto, el JSON.stringify(myObj) se convierte en una cadena. Entonces myObj ahora es un valor localStorage
Para leer y devolver valores de cadena, use el método JSON.parse() El JSON.parse() acepta cadenas JSON y las convierte en objetos JavaScript. JSON.parse() toma .getItem() como argumento:
let item = JSON.parse(localStorage.getItem(key));Ahora el item se establece igual al valor de la key. En el fragmento de código anterior, el valor de la key se estableció en la versión de cadena de myObj. El uso de JSON.parse convierte myObj nuevamente en un objeto. Por lo tanto, el item se establece igual a myObj como un objeto, no una cadena.
Ser capaz de convertir matrices y objetos en cadenas usando JSON.stringify y volver a convertirlos usando JSON.parse es muy útil. También necesitará saber cómo verificar si localStorage está vacío o no.
Revisa los articulos
En este paso, probará la presencia de elementos en localStorage. Puede usar if para verificar si localStorage contiene elementos o si está vacío. Para hacer esto, verifique la longitud de localStorage:
if (localStorage.length > 0) {
//...
}Si localStorage.length es mayor que 0, entonces hay elementos dentro del objeto localStorage Incluya una else en caso de que no haya elementos en localStorage:
if (localStorage.length > 0) {
//...
} else {
//...
}Puede incluir código para aplicar en else if y else. Es posible que desee iterar sobre los elementos en localStorage.
Repetición de elementos
Los localStorage y sessionStorage no admiten el método forEach localStorage través de los elementos en localStorage, use un bucle for
for (let i = 0; i < localStorage.length; i++){
}El key() toma un número entero como argumento y devuelve la clave correspondiente. Con un for, pase i como un número entero para key():
for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
}Utilice el getItem para devolver el valor correspondiente para la key:
for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let value = localStorage.getItem(key);
}Cree una console.log para imprimir la key y el value en la pantalla:
for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let value = localStorage.getItem(key);
console.log(key, value);
}key() es muy útil para iterar a través de localStorage usando bucles for No todos los navegadores admiten localStorage.
Revisa los medios
Puede probar el soporte para localStorage verificando si la window está disponible en el objeto usando una declaración if
if (window.localStorage) {
//localStorage supported
}También puede utilizar el sitio web Can I use... para comprobar el localStorage para los principales navegadores.
Conclusión
Puede utilizar los localStorage o sessionStorage para almacenar pares clave /valor. Hay métodos que le permiten interactuar con elementos dentro de localStorage. Con este tutorial, ha creado, eliminado y actualizado entradas dentro de localStorage. También ha convertido datos de objetos y matrices en cadenas y viceversa utilizando métodos JSON.
