LocalStorage y SessionStorage en JavaScript
En el ámbito del desarrollo web, almacenar datos de manera eficiente y segura en el lado del cliente es fundamental. JavaScript proporciona dos herramientas poderosas para este propósito: LocalStorage y SessionStorage. Este artículo profundiza en estas tecnologías, ofreciendo ejemplos de código prácticos y conocimientos expertos para capacitar a los desarrolladores y aprovechar al máximo estas características.
WARNING
¡Nunca almacenes información sensible o datos personales en localStorage o sessionStorage sin cifrarlos!
Comprender LocalStorage en JavaScript
LocalStorage te permite almacenar datos en el navegador del usuario de manera persistente, sin fecha de expiración. Esto significa que los datos almacenados en LocalStorage seguirán estando disponibles incluso después de cerrar y volver a abrir la ventana del navegador.
Cómo usar LocalStorage
Aquí tienes un ejemplo sencillo para demostrar cómo almacenar datos en LocalStorage. Puedes establecer cualquier par clave-valor mediante el método setItem, y leer cualquier valor por su clave usando el método getItem. También existe el método removeItem para eliminar un par por su clave. La API también proporciona clear() para eliminar todos los elementos, key(index) para acceder a los elementos por índice, length para contar los elementos almacenados y un listener de eventos storage para detectar cambios entre pestañas.
note
Las operaciones de LocalStorage son sincrónicas y se ejecutan en el hilo principal, lo que puede bloquear la renderización de la interfaz de usuario durante operaciones con grandes cantidades de datos.
Aplicación práctica: Crear un cambiador de temas usando LocalStorage
Imagina un escenario en el que deseas guardar el tema preferido del usuario (claro u oscuro) para que persista entre sesiones.
El siguiente ejemplo combina HTML, CSS y JavaScript en un solo bloque para mayor simplicidad.
<style>
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
.dark {
--bg-color: #333333;
--text-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.5s, color 0.5s;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
<body>
<button onclick="toggleTheme()">Toggle Theme</button>
<script>
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
function toggleTheme() {
var currentTheme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
if (currentTheme === 'light') {
setTheme('dark');
} else {
setTheme('light');
}
}
function loadTheme() {
var theme = localStorage.getItem('theme') || 'light';
setTheme(theme);
}
// Initial theme load
loadTheme();
</script>
</body>Este script busca un tema almacenado en LocalStorage o, por defecto, usa 'light' (claro). Luego aplica el tema estableciendo el nombre de clase del elemento HTML raíz, lo que permite que CSS ajuste los estilos en consecuencia.
SessionStorage: Almacenamiento temporal de datos en JavaScript
Mientras que LocalStorage está diseñado para almacenar datos sin fecha de expiración, SessionStorage proporciona una forma de almacenar datos durante la duración de la sesión de la página. Los datos almacenados en SessionStorage se borran cuando finaliza la sesión de la página, es decir, cuando se cierra la pestaña o la ventana.
Cómo usar SessionStorage
A continuación se muestra un ejemplo básico de uso de SessionStorage. Como puedes ver, los métodos y la sintaxis son bastante similares a los de localStorage. La diferencia radica en el modo de expiración, como se explicó anteriormente.
Ejemplo: Uso de SessionStorage en una función de autoguardado de datos de formulario
Imagina que tienes un formulario que un usuario podría rellenar, pero existe el riesgo de que cierre el navegador por error. Puedes usar SessionStorage para guardar temporalmente los datos del formulario.
<body>
<div>Start writing an email address in the following input. Refresh the page in the middle of your typing, and you'll see that the page remembers what you entered before.</div>
<br />
<input type="email" id="email"/>
</body>
<script>
window.onload = function() {
const email = sessionStorage.getItem('email');
if (email) {
alert('email found from session storage: ' + email);
document.getElementById('email').value = email;
}
document.getElementById('email').oninput = function() {
sessionStorage.setItem('email', this.value);
};
};
</script>Este código carga automáticamente cualquier correo electrónico guardado cuando se carga la página y actualiza el elemento de SessionStorage cada vez que cambia el campo de correo electrónico. Para probarlo, haz clic en el botón «pruébalo tú mismo», escribe algo en el campo de entrada y luego actualiza la página. El valor permanecerá allí después de la actualización.
INFO
Considera siempre las limitaciones de tamaño antes de almacenar cualquier dato (típicamente 5 MB tanto para LocalStorage como para SessionStorage).
Conclusión
LocalStorage y SessionStorage ofrecen opciones poderosas para mejorar la experiencia del usuario mediante la gestión eficiente de datos en aplicaciones web. Al comprender sus capacidades y limitaciones, los desarrolladores pueden tomar decisiones informadas sobre cómo utilizar mejor estas herramientas en sus proyectos.
Práctica
¿Cuáles de las siguientes afirmaciones son verdaderas sobre localStorage y sessionStorage en JavaScript?