Introducción al Almacenamiento Web

El almacenamiento web es un mecanismo proporcionado por los navegadores que permite a las aplicaciones guardar datos de manera local en el cliente. Existen dos implementaciones principales: localStorage, que persiste los datos de forma indefinida hasta su eliminación explícita, y sessionStorage, que mantiene los datos únicamente durante la sesión de la ventana o pestaña del navegador.

Capacidad y API

La capacidad de almacenamiento típica es de aproximadamente 5 MB, aunque esto puede variar entre navegadores. La API para ambos tipos es uniforme y se accede a través de las propiedades window.localStorage y window.sessionStorage.

• setItem(clave, valor): Agrega o actualiza un par clave-valor en el almacenamiento.
• getItem(clave): Devuelve el valor asociado a una clave, o null si no existe.
• removeItem(clave): Elimina el par clave-valor especificado por la clave.
• clear(): Borra todos los datos almacenados en el contxeto actual.

Comportamiento y Obesrvaciones

Los datos en sessionStorage se eliminan automáticamente al cerrar la pestaña o ventana del navegador. En contraste, los datos en localStorage permanecen hasta que se borren manualmente mediante código o limpieza del navegador. Nota: Al intentar parsear un valor null con JSON.parse, el resultado sigue siendo null.

Ejemplo Práctico con localStorage

El siguiente ejemplo muestra operaciones básicas con localStorage, incluyendo el almacenamiento de objetos JavaScript mediante serialización JSON.

<button onclick="almacenarDatos()">Guardar Información</button>
<button onclick="recuperarDatos()">Leer Información</button>
<button onclick="eliminarDatoEspecifico()">Borrar Dato</button>
<button onclick="limpiarTodoAlmacenamiento()">Limpiar Todo</button>

<script>
function almacenarDatos() {
    const usuario = {nombre: "Carlos", edad: 30};
    localStorage.setItem("saludo", "Bienvenido");
    localStorage.setItem('datosUsuario', JSON.stringify(usuario));
}

function recuperarDatos() {
    const saludo = localStorage.getItem("saludo");
    const datos = JSON.parse(localStorage.getItem('datosUsuario'));
    console.log("Saludo:", saludo);
    console.log("Usuario:", datos);
}

function eliminarDatoEspecifico() {
    localStorage.removeItem("saludo");
}

function limpiarTodoAlmacenamiento() {
    localStorage.clear();
}
</script>

Ejemplo con sessionStorage

Este ejemplo utiliza sessionStorage con una lógica similar, pero los datos se perderán al cerrar la pestaña actual.

<button onclick="guardarSesion()">Almacenar en Sesión</button>
<button onclick="obtenerDeSesion()">Recuperar de Sesión</button>
<button onclick="removerClaveSesion()">Eliminar Clave</button>
<button onclick="vaciarSesion()">Vaciar Sesión</button>

<script>
function guardarSesion() {
    const producto = {id: 101, nombre: "Laptop"};
    sessionStorage.setItem("mensajeTemporal", "Datos de sesión");
    sessionStorage.setItem('itemProducto', JSON.stringify(producto));
}

function obtenerDeSesion() {
    const mensaje = sessionStorage.getItem("mensajeTemporal");
    const producto = JSON.parse(sessionStorage.getItem('itemProducto'));
    console.log("Mensaje:", mensaje);
    console.log("Producto:", producto);
}

function removerClaveSesion() {
    sessionStorage.removeItem("mensajeTemporal");
}

function vaciarSesion() {
    sessionStorage.clear();
}
</script>