En esta lección, aprenderás sobre el almacenamiento local y de sesión en JavaScript. Estas son dos características del navegador que permiten almacenar datos en el lado del cliente, lo que puede ser útil para mantener el estado de la aplicación entre recargas de página o sesiones del navegador.
¿Qué es el Almacenamiento Local y de Sesión?
Almacenamiento Local (Local Storage)
El almacenamiento local permite almacenar datos en el navegador sin fecha de expiración. Los datos almacenados en el almacenamiento local persisten incluso después de cerrar el navegador o apagar el ordenador.
Almacenamiento de Sesión (Session Storage)
El almacenamiento de sesión es similar al almacenamiento local, pero con una diferencia clave: los datos almacenados en el almacenamiento de sesión solo persisten durante la sesión del navegador. Una vez que se cierra la pestaña o ventana del navegador, los datos se eliminan.
Comparación entre Almacenamiento Local y de Sesión
| Característica | Almacenamiento Local (Local Storage) | Almacenamiento de Sesión (Session Storage) |
|---|---|---|
| Persistencia | Permanente | Temporal (hasta que se cierra la pestaña) |
| Tamaño Máximo | Generalmente 5-10 MB | Generalmente 5-10 MB |
| Alcance | Todas las pestañas y ventanas | Solo la pestaña o ventana actual |
| Accesibilidad | JavaScript | JavaScript |
Uso del Almacenamiento Local
Guardar Datos en el Almacenamiento Local
Para guardar datos en el almacenamiento local, utilizamos el método setItem del objeto localStorage.
// Guardar un valor
localStorage.setItem('nombre', 'Juan');
// Guardar un objeto como JSON
const usuario = { nombre: 'Juan', edad: 30 };
localStorage.setItem('usuario', JSON.stringify(usuario));Recuperar Datos del Almacenamiento Local
Para recuperar datos, utilizamos el método getItem.
// Recuperar un valor
const nombre = localStorage.getItem('nombre');
console.log(nombre); // "Juan"
// Recuperar un objeto
const usuarioJSON = localStorage.getItem('usuario');
const usuario = JSON.parse(usuarioJSON);
console.log(usuario); // { nombre: 'Juan', edad: 30 }Eliminar Datos del Almacenamiento Local
Para eliminar datos, utilizamos el método removeItem.
Limpiar Todo el Almacenamiento Local
Para limpiar todos los datos almacenados, utilizamos el método clear.
Uso del Almacenamiento de Sesión
Guardar Datos en el Almacenamiento de Sesión
El uso del almacenamiento de sesión es similar al del almacenamiento local, pero utilizamos el objeto sessionStorage.
// Guardar un valor
sessionStorage.setItem('nombre', 'Ana');
// Guardar un objeto como JSON
const usuario = { nombre: 'Ana', edad: 25 };
sessionStorage.setItem('usuario', JSON.stringify(usuario));Recuperar Datos del Almacenamiento de Sesión
Para recuperar datos, utilizamos el método getItem.
// Recuperar un valor
const nombre = sessionStorage.getItem('nombre');
console.log(nombre); // "Ana"
// Recuperar un objeto
const usuarioJSON = sessionStorage.getItem('usuario');
const usuario = JSON.parse(usuarioJSON);
console.log(usuario); // { nombre: 'Ana', edad: 25 }Eliminar Datos del Almacenamiento de Sesión
Para eliminar datos, utilizamos el método removeItem.
Limpiar Todo el Almacenamiento de Sesión
Para limpiar todos los datos almacenados, utilizamos el método clear.
Ejercicio Práctico
Ejercicio 1: Guardar y Recuperar Datos
- Crea un formulario HTML con un campo de texto y un botón.
- Cuando el usuario haga clic en el botón, guarda el valor del campo de texto en el almacenamiento local.
- Recupera y muestra el valor almacenado en la consola del navegador.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Almacenamiento Local</title>
</head>
<body>
<input type="text" id="inputNombre" placeholder="Ingresa tu nombre">
<button id="btnGuardar">Guardar</button>
<script>
document.getElementById('btnGuardar').addEventListener('click', () => {
const nombre = document.getElementById('inputNombre').value;
localStorage.setItem('nombre', nombre);
console.log('Nombre guardado:', nombre);
});
// Recuperar y mostrar el valor almacenado
const nombreGuardado = localStorage.getItem('nombre');
if (nombreGuardado) {
console.log('Nombre recuperado:', nombreGuardado);
}
</script>
</body>
</html>Solución del Ejercicio 1
El código anterior crea un formulario simple con un campo de texto y un botón. Cuando el usuario hace clic en el botón, el valor del campo de texto se guarda en el almacenamiento local y se muestra en la consola. Si hay un valor almacenado previamente, se recupera y se muestra en la consola al cargar la página.
Conclusión
En esta lección, has aprendido sobre el almacenamiento local y de sesión en JavaScript. Estas herramientas son útiles para almacenar datos en el lado del cliente, lo que puede mejorar la experiencia del usuario al mantener el estado de la aplicación entre recargas de página o sesiones del navegador. Ahora estás listo para aplicar estos conceptos en tus proyectos y mejorar la funcionalidad de tus aplicaciones web.
JavaScript: De Principiante a Avanzado
Módulo 1: Introducción a JavaScript
- ¿Qué es JavaScript?
- Configuración de tu Entorno de Desarrollo
- Tu Primer Programa en JavaScript
- Sintaxis y Conceptos Básicos de JavaScript
- Variables y Tipos de Datos
- Operadores Básicos
Módulo 2: Estructuras de Control
- Sentencias Condicionales
- Bucles: for, while, do-while
- Sentencias Switch
- Manejo de Errores con try-catch
Módulo 3: Funciones
- Definición y Llamada de Funciones
- Expresiones de Función y Funciones Flecha
- Parámetros y Valores de Retorno
- Ámbito y Closures
- Funciones de Orden Superior
Módulo 4: Objetos y Arrays
- Introducción a los Objetos
- Métodos de Objeto y la Palabra Clave 'this'
- Arrays: Conceptos Básicos y Métodos
- Iteración sobre Arrays
- Desestructuración de Arrays
Módulo 5: Objetos y Funciones Avanzadas
- Prototipos y Herencia
- Clases y Programación Orientada a Objetos
- Módulos e Importación/Exportación
- JavaScript Asíncrono: Callbacks
- Promesas y Async/Await
Módulo 6: El Modelo de Objetos del Documento (DOM)
- Introducción al DOM
- Selección y Manipulación de Elementos del DOM
- Manejo de Eventos
- Creación y Eliminación de Elementos del DOM
- Manejo y Validación de Formularios
Módulo 7: APIs del Navegador y Temas Avanzados
- Almacenamiento Local y de Sesión
- Fetch API y AJAX
- WebSockets
- Service Workers y Aplicaciones Web Progresivas (PWAs)
- Introducción a WebAssembly
Módulo 8: Pruebas y Depuración
- Depuración de JavaScript
- Pruebas Unitarias con Jest
- Pruebas de Integración
- Pruebas de Extremo a Extremo con Cypress
Módulo 9: Rendimiento y Optimización
- Optimización del Rendimiento de JavaScript
- Gestión de Memoria
- Manipulación Eficiente del DOM
- Carga Perezosa y División de Código
Módulo 10: Frameworks y Librerías de JavaScript
- Introducción a React
- Gestión de Estado con Redux
- Conceptos Básicos de Vue.js
- Conceptos Básicos de Angular
- Elegir el Framework Adecuado