Introducción
Cerrar una página web accidentalmente al rellenar un formulario puede ser frustrante. Pierdes todos los datos que completaste y tienes que empezar de cero. En este artículo, aprenderás a usar localStorage en JavaScript para almacenar tus datos más allá de una sesión de navegación. Te mostraremos cómo usar este mecanismo y la propiedad Window.localStorage, y repasaremos los fundamentos del almacenamiento web en JavaScript.
¿Qué es LocalStorage en JavaScript?
LocalStorage es una función que permite a los sitios web y aplicaciones JavaScript almacenar pares clave-valor en un navegador web sin fecha de caducidad. Esto significa que los datos almacenados persisten incluso después de que el usuario cierre el navegador o reinicie el equipo.
LocalStorage es una propiedad del objeto ventana que lo convierte en un objeto global que puede interactuar con la ventana del navegador y manipularla. También puede usarse en combinación con otras propiedades y métodos de la ventana.
¿Qué es Window.localStorage?
El mecanismo localStorage está disponible a través de la propiedad Window.localStorage. Window.localStorage forma parte de la interfaz Window de JavaScript y representa una ventana que contiene un documento DOM.
La interfaz de Windows cuenta con una amplia gama de funciones, constructores, objetos y espacios de nombres. Window.localStorage es una propiedad de solo lectura que devuelve una referencia al objeto de almacenamiento local utilizado para almacenar datos accesibles únicamente para el recurso que los creó.
Cuándo usar localStorage
En pocas palabras, localStorage se utiliza para almacenar y recuperar datos. Si bien se pueden almacenar pequeñas cantidades de datos con localStorage, no es adecuado para grandes conjuntos de datos. Cualquier persona que use el dispositivo puede acceder a localStorage, por lo que no debe utilizarse para almacenar información confidencial. Puede utilizarse para almacenar preferencias de usuario, como el idioma o el tema. También puede utilizarse para almacenar datos en caché si se utiliza con frecuencia. localStorage puede almacenar datos de formularios que no se perderán si el usuario cierra el navegador.
Si tiene una aplicación que requiere iniciar sesión, puede usar localStorage para conservar los datos de la sesión. Podrá iniciar sesión incluso después de cerrar y volver a abrir el navegador. Lo demostraremos más adelante en este tutorial con una aplicación sencilla.
¿Dónde se almacena localStorage?
En Google Chrome, los datos de almacenamiento web se almacenan en un archivo SQLite, en una subcarpeta del perfil del usuario. Esta subcarpeta se encuentra en \AppData\Local\Google\Chrome\User Data\Default\Local Storage en equipos Windows y en ~/Library/Application Support/Google/Chrome/Default/Local Storage en macOS. Firefox almacena los objetos de almacenamiento en un archivo SQLite llamado webappsstore.sqlite, que también se encuentra en la carpeta del perfil del usuario.
Introducción a la API de almacenamiento web
LocalStorage es uno de los dos mecanismos de la API de Almacenamiento Web; el otro es SessionStorage. La API de Almacenamiento Web es un conjunto de mecanismos que permiten a los navegadores almacenar pares clave-valor. Está diseñada para ser mucho más intuitiva que el uso de cookies.
Los pares clave-valor representan objetos de almacenamiento similares a los objetos, excepto que permanecen intactos durante la carga de la página y siempre son cadenas. Puedes acceder a estos valores como si fueran un objeto o mediante el método getItem() (más información más adelante).
Almacenamiento de sesión frente a almacenamiento local
Tanto sessionStorage como localStorage tienen un área de almacenamiento independiente para cada recurso disponible durante la sesión de la página. La principal diferencia entre ambos radica en que sessionStorage solo mantiene un área de almacenamiento. Mientras tanto, el navegador está abierto (incluso al recargar o actualizar la página), localStorage continúa almacenando datos después de cerrar el navegador.
LocalStorage almacena datos que no caducan, mientras que SessionStorage solo almacena datos de una sesión. Es importante tener en cuenta que los datos de LocalStorage cargados en una sesión de navegación de incógnito se borran al cerrar la última pestaña privada. El método setItem SessionStorage es útil cuando se requiere el almacenamiento temporal de datos y debe utilizarse cuando no se requiere la persistencia de los datos más allá de la sesión actual.
SessionStorage suele tener límites de almacenamiento más bajos que localStorage, a menudo limitados a unos pocos megabytes por recurso. Esto lo hace ideal para almacenar datos temporales durante una sesión de usuario sin consumir demasiados recursos del navegador.
LocalStorage, por otro lado, ofrece una mayor capacidad de almacenamiento, que suele oscilar entre 5 y 10 MB por origen. Es ideal para almacenar grandes cantidades de datos que deben persistir en varias sesiones.
Ventajas y desventajas de LocalStorage
LocalStorage en JavaScript es una herramienta importante para almacenar datos del lado del cliente. Sin embargo, tiene varias ventajas y desventajas que conviene considerar.
Beneficios
La primera ventaja de LocalStorage, que ya hemos mencionado varias veces, es que los datos almacenados no caducan. Puedes acceder a ellos sin conexión, y localStorage almacena datos que pueden usarse sin conexión a internet.
Almacenar datos con localStorage es más seguro que con cookies, y te da mayor control sobre tus datos. Además, localStorage tiene mayor capacidad de almacenamiento que las cookies. Mientras que las cookies solo pueden almacenar cuatro kilobytes de datos, LocalStorage puede almacenar hasta cinco megabytes.
Desventajas
LocalStorage es síncrono, lo que significa que cada operación se ejecuta una tras otra. Esto causa problemas mínimos con conjuntos de datos pequeños, pero a medida que los datos crecen, puede convertirse en un problema grave.
Aunque LocalStorage es más seguro que las cookies, no debería usarlo para almacenar datos confidenciales. Cualquier persona con acceso al dispositivo del usuario puede acceder a los datos almacenados con localStorage. Además, localStorage solo puede almacenar cadenas, por lo que si desea almacenar otros tipos de datos, deberá convertirlos a cadenas. Finalmente, almacenar demasiados datos con localStorage puede ralentizar su aplicación.
¿Cómo funciona LocalStorage?
Ya lo has oído muchas veces: localStorage almacena datos. Y si almacenas datos, significa que podrías necesitar recuperarlos más adelante. En esta sección, veremos exactamente cómo funciona localStorage. Aquí tienes un resumen:
- setItem(): agrega la clave y el valor a localStorage
- getItem(): recupera/obtiene elementos de localStorage
- removeItem(): elimina un elemento del almacenamiento local
- clear(): borra todos los datos de localStorage
- key(): almacena un número para recuperar la clave local
Guardar datos con setItem()
El método setItem() permite almacenar valores en localStorage. Acepta dos parámetros: una clave y un valor. Se puede hacer referencia a la clave posteriormente para obtener el valor asociado. Debería verse así:
localStorage.setItem('name', 'Obaseki Nosa');
En el código anterior, se puede ver que "nombre" es la clave y "Obaseki Nosa" el valor. Como mencionamos anteriormente, localStorage solo puede almacenar cadenas. Para almacenar matrices u objetos en localStorage, es necesario convertirlos a cadenas.
Para hacer esto, usamos el método JSON.stringify antes de pasarlo a setItem(), de esta manera:
const userArray = ["Obaseki",25]
localStorage.setItem('user', JSON.stringify(userArray));Recuperar información con getItem()
getItem() permite acceder a los datos almacenados en el objeto localStorage del navegador. Este método solo acepta un parámetro, la clave, y devuelve el valor como una cadena:
localStorage.getItem('name');
Esto devuelve una cadena con el valor "Obaseki Nosa". Si la clave especificada no existe en localStorage, devuelve un valor nulo. En el caso de una matriz, utilizamos el método JSON.parse(), que convierte la cadena JSON en un objeto JavaScript:
JSON.parse(localStorage.getItem('user'));
Usando la matriz que creamos arriba, aquí se explica cómo recuperarla de localStorage:
const userData = JSON.parse(localStorage.getItem('user'));
console.log(userData);Este método devuelve la matriz [“Obaseki”, 25]. Puedes inspeccionar la página web y encontrarla en la consola, así:
Esta imagen es de Firefox, por lo que se verá un poco diferente en otros navegadores. Comparémosla con otra matriz que no se almacena con localStorage:
const userArray2 = ["Oscar", 27];
console.log(userArray2);Ahora, tenemos dos matrices en la consola, como se muestra a continuación:
Normalmente, si los comentas en tu editor de código, deberían desaparecer de la consola. Pero todo lo almacenado con localStorage permanecerá. Aquí tienes un ejemplo:
Eliminar datos con removeItem()
Para eliminar un elemento de localStorage, se usa el método removeItem(). Al pasar el nombre de la clave, el método removeItem() elimina la clave existente de la memoria. Si no hay ningún elemento asociado a la clave dada, este método no realiza ninguna acción. Aquí está el código:
.localStorage.removeItem('name');
Cómo eliminar todo en localStorage: clear()
Para eliminar todo el almacenamiento local, use el método clear(). Al llamar a este método, se borran todos los registros de ese dominio. No requiere parámetros. Use el siguiente código:
localStorage.clear();
Cómo obtener el nombre de una clave: key()
El método key() resulta útil cuando se necesita recorrer las claves en bucle, pero aún así poder pasar un número o una lista a localStorage para recuperar el nombre de la clave. Así es como se ve:
localStorage.key(index);El parámetro de índice representa el índice basado en cero de la clave cuyo nombre desea recuperar.
Almacenamiento local frente a cookies
Tanto LocalStorage como las cookies se utilizan para almacenar datos del cliente. Como mencionamos anteriormente, las cookies solo pueden almacenar un máximo de cuatro kilobytes de datos, lo cual es significativamente menor que la capacidad de almacenamiento de cinco megabytes de LocalStorage.
Las cookies se envían automáticamente al servidor con cada solicitud HTTP, pero localStorage permanece local en el dispositivo del usuario. Esto puede mejorar el rendimiento web y no aumenta el tráfico de red, ya que no comparte datos con el servidor.
Como hemos visto, los datos que almacena con localStorage no caducan. Permanecen allí indefinidamente a menos que los elimine manualmente. Las cookies, en cambio, pueden configurarse para que caduquen después de un tiempo o al cerrar el navegador. Las cookies suelen almacenar datos como las preferencias del usuario y la información de inicio de sesión/autenticación. Estos datos son accesibles en todas las pestañas y ventanas del navegador. Sin embargo, localStorage solo almacena datos accesibles en un protocolo o dominio específico.
Compatibilidad con almacenamiento local del navegador
LocalStorage, como tipo de almacenamiento web, es una especificación HTML5. Es compatible con los principales navegadores, incluido Internet Explorer v8. Puede usar el siguiente fragmento para comprobar si su navegador admite localStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage
} else {
// No web storage Support.
}Técnicas avanzadas para la gestión de datos en localStorage
Ahora, exploraremos algunas técnicas avanzadas para la gestión de datos en el almacenamiento local. Aprenderemos a eliminar claves eficazmente, aplicar las mejores prácticas para almacenar y organizar objetos, y usar el análisis de JSON y la conversión en cadenas para datos complejos.
Extracción eficaz de claves
Eliminar claves de los objetos almacenados en localStorage es esencial para optimizar el espacio de almacenamiento, especialmente si se crea una aplicación donde los datos se actualizan o eliminan con frecuencia. Eliminar claves innecesarias ayuda a evitar que LocalStorage se aglomere con datos inútiles.
Para eliminar eficazmente una clave de un objeto en localStorage, puede recuperar el objeto usando la clave, eliminar la propiedad deseada y luego devolver el objeto actualizado a localStorage. Esto minimiza la manipulación innecesaria de datos y la sobrecarga de almacenamiento:
// Example of efficient key removal
let storedData = JSON.parse(localStorage.getItem('key'));
delete storedData.propertyToRemove;
localStorage.setItem('key', JSON.stringify(storedData));Guardar y organizar objetos
El análisis y la conversión de JSON en cadenas son técnicas eficaces para gestionar estructuras de datos complejas al almacenar y recuperar datos en localStorage. Permiten una conversión sencilla entre objetos JavaScript y cadenas JSON, lo que facilita la gestión y manipulación eficiente de datos.
Al almacenar estructuras de datos complejas, como objetos o matrices, en localStorage, es fundamental convertirlas en cadenas mediante JSON.stringify() antes de configurarlas en localStorage. Esto convierte el objeto JavaScript en una cadena JSON, que puede almacenarse como un par clave-valor:
// Storing an object in LocalStorage
let dataObject = { key: 'value' };
localStorage.setItem('objectKey', JSON.stringify(dataObject));
// Retrieving and parsing the object from LocalStorage
let retrievedObject = JSON.parse(localStorage.getItem('objectKey'));Al trabajar con objetos o matrices anidados, asegúrese de que todos los objetos anidados también estén codificados y analizados para mantener la integridad de la estructura de datos:
// Storing and retrieving nested objects in LocalStorage
let nestedObject = { key1: 'value1', key2: { nestedKey: 'nestedValue' } };
localStorage.setItem('nestedObject', JSON.stringify(nestedObject));
let retrievedNestedObject = JSON.parse(localStorage.getItem('nestedObject'));Resultado
En este artículo, exploramos las capacidades de LocalStorage en JavaScript como una forma sencilla y eficiente de almacenar y recuperar datos sin depender de cookies. Explicamos cómo y cuándo usar localStorage, así como cómo almacenar, recuperar y eliminar elementos en localStorage. Demostramos LocalStorage en acción mediante un ejemplo práctico y lo comparamos con las cookies.
En esta publicación, aprendiste cómo y cuándo usar localStorage. Explicamos cómo almacenar, recuperar y eliminar elementos en localStorage. También creamos una aplicación práctica para ver cómo funciona LocalStorage. Finalmente, lo comparamos con las cookies.
Entonces, has llegado al lugar correcto con una excelente herramienta que es fácil de usar y tiene un amplio soporte para navegadores.
