4.1 localStorage y sessionStorage
Los almacenamientos web permiten a las aplicaciones web guardar datos en el navegador del usuario. Esto es útil para guardar información que debe persistir entre visitas o al navegar entre páginas. En HTML5, se introdujeron dos tipos principales de almacenamientos web: localStorage y sessionStorage.
¿Qué es localStorage?
localStorage es un almacenamiento de datos que se guarda en el navegador del usuario de forma indefinida. Los datos en localStorage permanecen disponibles incluso después de cerrar el navegador y reiniciar la computadora. Esto es útil para guardar información que necesita persistir entre sesiones, como configuraciones de usuario o datos del carrito de compras.
¿Qué es sessionStorage?
sessionStorage es un almacenamiento de datos que se guarda en el navegador del usuario durante una sola sesión. Los datos en sessionStorage están disponibles solo mientras la pestaña o ventana del navegador está abierta. Esto es útil para guardar datos que se necesitan solo durante una sesión, como datos temporales de formularios o estados de aplicaciones.
Métodos y propiedades principales
Métodos y propiedades de localStorage y sessionStorage
Ambos tipos de almacenamientos web tienen la misma API, que incluye métodos y propiedades para trabajar con datos:
setItem(key, value): guarda un valor con la clave especificada.getItem(key): devuelve el valor guardado bajo la clave especificada.removeItem(key): elimina el valor con la clave especificada.clear(): limpia todos los datos en el almacenamiento.key(index): devuelve la clave en el índice especificado.length: devuelve la cantidad de pares clave-valor en el almacenamiento.
4.2 Ejemplos de uso
Ejemplo de uso de localStorage:
<!DOCTYPE html>
<html>
<head>
<title>localStorage Example</title>
</head>
<body>
<h1>localStorage Example</h1>
<input type="text" id="username" placeholder="Enter your username">
<button id="saveButton">Save</button>
<button id="loadButton">Load</button>
<script>
const saveButton = document.getElementById('saveButton');
const loadButton = document.getElementById('loadButton');
const usernameInput = document.getElementById('username');
// Guardar valor en localStorage
saveButton.addEventListener('click', function() {
const username = usernameInput.value;
localStorage.setItem('username', username);
alert('¡Nombre de usuario guardado!');
});
// Cargar valor de localStorage
loadButton.addEventListener('click', function() {
const savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
alert('¡Nombre de usuario cargado!\n' + `${savedUsername}`);
} else {
alert('No se encontró ningún nombre de usuario.');
}
});
</script>
</body>
</html>
Ejemplo de uso de sessionStorage:
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage Example</title>
</head>
<body>
<h1>sessionStorage Example</h1>
<input type="text" id="sessionData" placeholder="Enter some data">
<button id="saveSessionButton">Save</button>
<button id="loadSessionButton">Load</button>
<script>
const saveSessionButton = document.getElementById('saveSessionButton');
const loadSessionButton = document.getElementById('loadSessionButton');
const sessionDataInput = document.getElementById('sessionData');
// Guardar valor en sessionStorage
saveSessionButton.addEventListener('click', function() {
const data = sessionDataInput.value;
sessionStorage.setItem('data', data);
alert('¡Datos guardados en la sesión!');
});
// Cargar valor de sessionStorage
loadSessionButton.addEventListener('click', function() {
const savedData = sessionStorage.getItem('data');
if (savedData) {
sessionDataInput.value = savedData;
alert('¡Datos cargados de la sesión!\n' + `${savedData}`);
} else {
alert('No se encontraron datos en la sesión.');
}
});
</script>
</body>
</html>
4.3 Comparación entre localStorage y sessionStorage
Diferencias entre localStorage y sessionStorage
- Duración del almacenamiento:
- localStorage guarda datos indefinidamente hasta que el usuario o un script los elimine explícitamente.
- sessionStorage guarda datos solo durante la sesión actual (pestaña o ventana del navegador).
- Alcance:
- Los datos en localStorage están disponibles en todas las pestañas y ventanas del mismo dominio.
- Los datos en sessionStorage están disponibles solo en la pestaña o ventana actual.
- Tamaño del almacenamiento:
- Generalmente, localStorage y sessionStorage tienen un límite de 5-10 MB por dominio, dependiendo del navegador.
Ejemplo de comparación del uso de localStorage y sessionStorage:
<!DOCTYPE html>
<html>
<head>
<title>Comparison Example</title>
</head>
<body>
<script>
// Uso de localStorage
localStorage.setItem('persistentData', 'This data persists across sessions');
console.log(localStorage.getItem('persistentData')); // "This data persists across sessions"
// Uso de sessionStorage
sessionStorage.setItem('temporaryData', 'This data persists only during the session');
console.log(sessionStorage.getItem('temporaryData')); // "This data persists only during the session"
</script>
</body>
</html>
4.4 Ámbitos de aplicación
Cuándo usar localStorage:
- Almacenar datos que deben persistir entre sesiones, como configuraciones o preferencias del usuario
- Almacenar datos que deben estar disponibles en todas las pestañas y ventanas de un dominio
- Almacenar datos que cambian raramente
Cuándo usar sessionStorage:
- Almacenar datos temporales que solo se necesitan durante la sesión actual
- Almacenar datos que son específicos de la pestaña o ventana actual del navegador
- Almacenar datos que deben eliminarse al cerrar la pestaña o ventana
Seguridad y privacidad
Al usar los almacenamientos web, es importante considerar cuestiones de seguridad y privacidad:
- Cifrado: los datos en los almacenamientos web no están cifrados por defecto. Si necesitas guardar información confidencial, se recomienda cifrar los datos antes de guardarlos.
- Ataques de cross-domain: los almacenamientos web funcionan dentro de un solo dominio, lo que previene el acceso a datos de otros dominios. Sin embargo, es importante protegerse contra ataques tipo XSS (cross-site scripting) para que los atacantes no puedan acceder a los datos del almacenamiento.
- Límite de datos: intenta guardar solo la información necesaria y limpia regularmente los datos obsoletos para evitar que el almacenamiento se llene.
GO TO FULL VERSION