Almacenamiento web en HTML
Tipos de Almacenamiento Web
Existen dos tipos de almacenamiento web: Almacenamiento Local y Almacenamiento de Sesión. Ambos permiten almacenar pares clave-valor en el navegador, pero tienen diferentes duraciones y alcances.
Almacenamiento Local
El Almacenamiento Local es un tipo de almacenamiento web que permite guardar datos en el navegador sin fecha de caducidad. Los datos almacenados en el Almacenamiento Local permanecerán en el navegador incluso después de cerrar la ventana. Esto lo hace útil para almacenar datos que necesitan permanecer durante más tiempo.
Para almacenar datos en el Almacenamiento Local, puedes usar el objeto localStorage.
Consejo: Almacenar un valor en el Almacenamiento Local
localStorage.setItem('username', 'JohnDoe');Estamos almacenando un par clave-valor donde la clave es 'username' y el valor es 'JohnDoe'. Para obtener los datos almacenados, puedes usar el método getItem():
Consejo: Obtener un valor del Almacenamiento Local
const username = localStorage.getItem('username');
console.log(username); // Salida: 'JohnDoe'También puedes cambiar el valor de un elemento almacenado usando setItem() de nuevo con la misma clave y un nuevo valor:
Consejo: Cambiar un valor en el Almacenamiento Local
localStorage.setItem('username', 'JaneSmith');Almacenamiento de Sesión
El Almacenamiento de Sesión es otro tipo de almacenamiento web que permite guardar datos para una sola sesión. Los datos almacenados en el Almacenamiento de Sesión permanecerán en el navegador solo hasta que se cierre la ventana o pestaña. Una vez que la sesión termina, los datos se eliminan.
Para almacenar datos en el Almacenamiento de Sesión, puedes usar el objeto sessionStorage, que tiene los mismos métodos que localStorage.
Consejo: Almacenar un valor en el Almacenamiento de Sesión
sessionStorage.setItem('theme', 'dark');Estamos almacenando un par clave-valor donde la clave es 'theme' y el valor es 'dark'. Para obtener los datos almacenados, puedes usar el método getItem():
Consejo: Obtener un valor del Almacenamiento de Sesión
const theme = sessionStorage.getItem('theme');
console.log(theme); // Salida: 'dark'Puedes cambiar los datos almacenados en el Almacenamiento de Sesión de la misma manera que en el Almacenamiento Local, usando el método setItem() con la misma clave y un nuevo valor:
Consejo: Cambiar un valor en el Almacenamiento de Sesión
sessionStorage.setItem('theme', 'light');Tanto el Almacenamiento Local como el Almacenamiento de Sesión tienen sus propios usos basados en la duración y el alcance de los datos que deseas almacenar. El Almacenamiento Local es bueno para guardar datos que necesitan permanecer incluso después de cerrar el navegador, mientras que el Almacenamiento de Sesión es útil para almacenar datos específicos de una sola sesión o página.
Trabajando con Almacenamiento Web
El Almacenamiento Web proporciona métodos para guardar, obtener y eliminar datos en el navegador. Veamos cómo trabajar con datos tanto en el Almacenamiento Local como en el Almacenamiento de Sesión.
Almacenamiento de Datos
Para almacenar datos en el Almacenamiento Web, puedes usar el método setItem(). Este método toma dos argumentos: la clave (una cadena) y el valor que quieres almacenar.
Puedes almacenar diferentes tipos de datos en el Almacenamiento Web, como cadenas, números y objetos. Al almacenar objetos, necesitas convertirlos a una cadena usando JSON.stringify() antes de guardarlos.
Consejo: Almacenando una cadena y un objeto en el Almacenamiento Local
// Almacenando una cadena
localStorage.setItem('username', 'JohnDoe');
// Almacenando un objeto
const user = {
name: 'John Doe',
age: 25,
email: 'john@example.com'
};
localStorage.setItem('user', JSON.stringify(user));Obteniendo Datos
Para obtener datos del Almacenamiento Web, puedes usar el método getItem(). Este método toma un argumento: la clave de los datos que quieres obtener.
Si los datos almacenados son una cadena, puedes usarlos directamente. Sin embargo, si almacenaste un objeto, necesitas analizarlo de vuelta a un objeto usando JSON.parse().
Consejo: Obteniendo datos del Almacenamiento Local
// Obteniendo una cadena
const username = localStorage.getItem('username');
console.log(username); // Salida: 'JohnDoe'
// Obteniendo un objeto
const userString = localStorage.getItem('user');
const user = JSON.parse(userString);
console.log(user.name); // Salida: 'John Doe'
console.log(user.age); // Salida: 25
console.log(user.email); // Salida: 'john@example.com'Eliminando Datos
Para eliminar datos del Almacenamiento Web, tienes dos opciones:
| Opción | Descripción |
|---|---|
removeItem() |
Elimina un par clave-valor específico |
clear() |
Elimina todos los datos almacenados en Almacenamiento Web |
Consejo: Eliminando datos del Almacenamiento Local
// Eliminando un elemento específico
localStorage.removeItem('username');
// Eliminando todos los datos
localStorage.clear();Los mismos métodos (setItem(), getItem(), removeItem(), y clear()) pueden usarse con el Almacenamiento de Sesión reemplazando localStorage por sessionStorage.
Recuerda que los datos almacenados en el Almacenamiento Web son específicos del dominio. Cada dominio tiene su propio espacio de almacenamiento separado, y JavaScript de un dominio no puede acceder a los datos almacenados por otro dominio.
Eventos de Almacenamiento Web
El Almacenamiento Web proporciona eventos que permiten reaccionar a cambios en los datos almacenados. Estos eventos se activan cuando los datos se guardan, modifican o eliminan tanto en el Almacenamiento Local como en el Almacenamiento de Sesión.
El evento storage se dispara cada vez que ocurre un cambio en el Almacenamiento Web. Este evento se activa en el objeto window de todas las páginas del mismo origen que tengan acceso al área de almacenamiento. El objeto de evento pasado al listener del evento contiene propiedades útiles como:
| Propiedad | Descripción |
|---|---|
key |
La clave del elemento que fue modificado (añadido, actualizado o eliminado). |
oldValue |
El valor antiguo del elemento antes del cambio (null si se añadió un nuevo elemento). |
newValue |
El nuevo valor del elemento después del cambio (null si se eliminó un elemento). |
url |
La URL de la página que realizó el cambio. |
storageArea |
El objeto de almacenamiento (localStorage o sessionStorage) que fue afectado. |
Para manejar eventos de almacenamiento, puedes usar el método addEventListener() en el objeto window.
Consejo: Manejo de Eventos de Almacenamiento
window.addEventListener('storage', function(event) {
console.log('Evento de almacenamiento activado');
console.log('Clave:', event.key);
console.log('Valor antiguo:', event.oldValue);
console.log('Valor nuevo:', event.newValue);
console.log('URL:', event.url);
console.log('Área de almacenamiento:', event.storageArea);
});Es importante tener en cuenta que el evento storage no se activa en la misma página que realizó el cambio. Solo se activa en otras páginas del mismo origen que tengan acceso al área de almacenamiento. Esto permite la comunicación entre diferentes páginas o pestañas de tu aplicación.
Consejo: Sincronización de Datos Entre Páginas
// Página 1
localStorage.setItem('tema', 'oscuro');
// Página 2
window.addEventListener('storage', function(event) {
if (event.key === 'tema') {
document.body.className = event.newValue;
}
});La Página 1 establece el valor de la clave 'tema' en el Almacenamiento Local. La Página 2 escucha eventos de almacenamiento y verifica si la clave cambiada es 'tema'. Si lo es, actualiza el nombre de clase del elemento <body> al nuevo valor, aplicando el cambio de tema.
Los eventos de almacenamiento proporcionan una forma de reaccionar a los cambios en el Almacenamiento Web y permiten la comunicación y sincronización entre diferentes páginas o pestañas de tu aplicación. Se pueden usar para varios propósitos, como sincronizar preferencias de usuario, actualizar datos mostrados en tiempo real o activar ciertas acciones basadas en cambios en los datos almacenados.
Seguridad del Almacenamiento Web
Al usar Almacenamiento Web (Almacenamiento Local y Almacenamiento de Sesión) para guardar datos en el navegador, debes considerar la seguridad para proteger tu aplicación y los datos del usuario de accesos no autorizados o ataques.
Uno de los principales riesgos de seguridad asociados con el Almacenamiento Web son los ataques de scripts entre sitios (XSS). Los ataques XSS ocurren cuando se inyectan scripts maliciosos en tu aplicación y se ejecutan en el contexto de tu página. Si almacenas datos sensibles en el Almacenamiento Web sin medidas de seguridad adecuadas, un atacante podría acceder y robar esos datos.
Para prevenir ataques XSS, siempre debes validar y desinfectar cualquier entrada del usuario antes de almacenarla en el Almacenamiento Web. Esto significa revisar la entrada en busca de caracteres o scripts maliciosos y eliminarlos o codificarlos. Puedes usar bibliotecas o frameworks que proporcionen funciones integradas de validación y desinfección de entradas para ayudar con este proceso.
Consejo: Desinfectar Entrada del Usuario
function sanitizeInput(input) {
// Elimina cualquier etiqueta HTML y caracteres especiales
return input.replace(/<[^>]*>?/gm, '').replace(/[^\w\s]/gi, '');
}
const userInput = '<script>alert("Ataque XSS!");</script>';
const sanitizedInput = sanitizeInput(userInput);
localStorage.setItem('userInput', sanitizedInput);Otra consideración de seguridad es cifrar los datos sensibles antes de almacenarlos en el Almacenamiento Web. Aunque los datos del Almacenamiento Web no son directamente accesibles por otros sitios web, aún pueden ser leídos por cualquiera que tenga acceso al dispositivo o navegador del usuario. Cifrar los datos añade una capa extra de protección.
Para cifrar datos, puedes usar algoritmos de cifrado como AES (Estándar de Cifrado Avanzado) o bibliotecas que proporcionen funciones de cifrado. Antes de almacenar datos sensibles, cífralos con una clave de cifrado segura. Al recuperar los datos, descífralos usando la misma clave.
Consejo: Cifrar y Descifrar Datos
function encryptData(data, key) {
// Implementar lógica de cifrado usando una biblioteca o algoritmo
// Ejemplo usando un cifrado de sustitución simple
const encryptedData = data.split('').map(char => String.fromCharCode(char.charCodeAt(0) + key)).join('');
return encryptedData;
}
function decryptData(encryptedData, key) {
// Implementar lógica de descifrado usando una biblioteca o algoritmo
// Ejemplo usando un cifrado de sustitución simple
const decryptedData = encryptedData.split('').map(char => String.fromCharCode(char.charCodeAt(0) - key)).join('');
return decryptedData;
}
const sensitiveData = 'Datos Secretos';
const encryptionKey = 3;
const encryptedData = encryptData(sensitiveData, encryptionKey);
localStorage.setItem('sensitiveData', encryptedData);
// Recuperar y descifrar los datos
const storedEncryptedData = localStorage.getItem('sensitiveData');
const decryptedData = decryptData(storedEncryptedData, encryptionKey);
console.log(decryptedData); // Salida: 'Datos Secretos'Es importante elegir una clave de cifrado segura y mantenerla a salvo. Evita almacenar la clave de cifrado en el mismo lugar que los datos cifrados, ya que anularía el propósito del cifrado.
Además, ten cuidado con los datos que almacenas en el Almacenamiento Web. Evita almacenar información altamente sensible como contraseñas, números de tarjetas de crédito o números de identificación personal (PIN) en el Almacenamiento Web, incluso si están cifrados. Generalmente es más seguro almacenar estos datos sensibles en el lado del servidor y usar protocolos de comunicación seguros como HTTPS para transmitir los datos.
Ejemplos prácticos y casos de uso
El almacenamiento web (Almacenamiento local y Almacenamiento de sesión) tiene muchos usos en el desarrollo web. Aquí hay algunos ejemplos comunes y casos de uso donde el Almacenamiento web puede mejorar la experiencia del usuario y la funcionalidad de la aplicación.
Almacenar preferencias y ajustes del usuario
El Almacenamiento web es una forma de guardar las preferencias y ajustes del usuario. Puedes usar el Almacenamiento local para guardar cosas como el idioma preferido del usuario, el tema o las opciones de diseño. Esto te permite mantener las preferencias del usuario incluso después de que abandonen el sitio y vuelvan más tarde.
Consejo: Almacenar preferencias y ajustes del usuario
// Establecer la preferencia de tema del usuario
function setTheme(theme) {
localStorage.setItem('theme', theme);
applyTheme(theme);
}
// Aplicar el tema seleccionado
function applyTheme(theme) {
document.body.className = theme;
}
// Obtener la preferencia de tema del usuario al cargar la página
window.addEventListener('load', function() {
const storedTheme = localStorage.getItem('theme');
if (storedTheme) {
applyTheme(storedTheme);
}
});La función setTheme() guarda el tema seleccionado por el usuario en el Almacenamiento local. La función applyTheme() aplica el tema a la página estableciendo el nombre de clase del elemento <body>. Al cargar la página, comprobamos si hay una preferencia de tema almacenada y la aplicamos si se encuentra.
Almacenar datos en caché para acceso sin conexión
El Almacenamiento web puede almacenar datos en caché para acceso sin conexión. Si tu aplicación web necesita funcionar sin conexión o en situaciones de baja conectividad, puedes guardar datos en el Almacenamiento local. Esto permite que la aplicación funcione incluso cuando el usuario no está conectado a internet.
Consejo: Almacenar datos en caché para acceso sin conexión
// Almacenar los datos en caché en el Almacenamiento local
function cacheData(data) {
localStorage.setItem('cachedData', JSON.stringify(data));
}
// Recuperar los datos en caché del Almacenamiento local
function getCachedData() {
const cachedData = localStorage.getItem('cachedData');
return cachedData ? JSON.parse(cachedData) : null;
}
// Obtener datos del servidor
function fetchDataFromServer() {
// Hacer una solicitud API para obtener datos
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// Almacenar en caché los datos obtenidos
cacheData(data);
// Usar los datos en la aplicación
displayData(data);
})
.catch(error => {
console.log('Error al obtener datos:', error);
// Recuperar datos en caché como alternativa
const cachedData = getCachedData();
if (cachedData) {
displayData(cachedData);
} else {
console.log('No hay datos en caché disponibles.');
}
});
}La función cacheData() guarda los datos obtenidos en el Almacenamiento local. La función getCachedData() recupera los datos en caché del Almacenamiento local. Si la aplicación no logra obtener datos del servidor (por ejemplo, debido a un error de red), recurre a los datos en caché si están disponibles.
Implementar funcionalidad de carrito de compras
El Almacenamiento web puede implementar la funcionalidad de carrito de compras en aplicaciones de comercio electrónico. Puedes usar el Almacenamiento de sesión para guardar los productos y cantidades seleccionados por el usuario mientras navega por el sitio web. Esto permite que el carrito de compras permanezca intacto incluso si el usuario navega a otra página o cierra la pestaña del navegador.
Consejo: Implementar funcionalidad de carrito de compras
// Añadir un producto al carrito de compras
function addToCart(product) {
let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
cart.push(product);
sessionStorage.setItem('cart', JSON.stringify(cart));
}
// Eliminar un producto del carrito de compras
function removeFromCart(productId) {
let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
cart = cart.filter(product => product.id !== productId);
sessionStorage.setItem('cart', JSON.stringify(cart));
}
// Obtener el contenido actual del carrito de compras
function getCartContents() {
return JSON.parse(sessionStorage.getItem('cart')) || [];
}La función addToCart() añade un producto al carrito de compras almacenado en el Almacenamiento de sesión. La función removeFromCart() elimina un producto del carrito basado en su ID. La función getCartContents() recupera el contenido actual del carrito de compras.
Guardar datos de formularios temporalmente
El Almacenamiento web puede guardar datos de formularios temporalmente. Si un usuario está llenando un formulario largo y accidentalmente cierra el navegador o navega a otra página, puedes usar el Almacenamiento de sesión para guardar su progreso. Cuando vuelvan al formulario, puedes restaurar los datos guardados, permitiéndoles continuar desde donde lo dejaron.
Consejo: Guardar datos de formularios temporalmente
// Guardar datos del formulario en el Almacenamiento de sesión
function saveFormData() {
const form = document.querySelector('form');
const formData = new FormData(form);
sessionStorage.setItem('formData', JSON.stringify(Object.fromEntries(formData)));
}
// Cargar datos del formulario desde el Almacenamiento de sesión
function loadFormData() {
const savedData = sessionStorage.getItem('formData');
if (savedData) {
const formData = JSON.parse(savedData);
const form = document.querySelector('form');
Object.keys(formData).forEach(key => {
const field = form.elements[key];
if (field) {
field.value = formData[key];
}
});
}
}
// Guardar datos del formulario al cambiar un campo
document.querySelector('form').addEventListener('input', saveFormData);
// Cargar datos del formulario al cargar la página
window.addEventListener('load', loadFormData);La función saveFormData() guarda los datos del formulario en el Almacenamiento de sesión cada vez que cambia un campo de entrada. La función loadFormData() carga los datos del formulario guardados desde el Almacenamiento de sesión cuando se carga la página, rellenando los campos del formulario con los valores previamente introducidos.
Estos son algunos ejemplos de cómo se puede usar el Almacenamiento web en escenarios prácticos. El Almacenamiento web proporciona una forma simple de almacenar datos en el lado del cliente, permitiendo varias características y mejoras en las aplicaciones web. Ofrece una solución para mejorar la experiencia del usuario y la funcionalidad de tus aplicaciones web.