JavaScript
Explica cómo localStorage y sessionStorage guardan pares clave-valor, sus límites síncronos y cuándo no son adecuados para datos sensibles o grandes.
ofrece dos almacenes síncronos de pares string-string dentro del navegador:
localStorage;
sessionStorage;storage.setItem(key, value);
storage.getItem(key);
storage.removeItem(key);
storage.clear();
storage.key(index);
storage.length;getItem devuelve null cuando la clave no existe.
localStorage.setItem("count", 10);
localStorage.getItem("count"); // "10"Para estructuras:
localStorage.setItem(
"preferences",
JSON.stringify(preferences),
);Al leer:
const rawValue = localStorage.getItem("preferences");
const preferences = rawValue === null
? null
: JSON.parse(rawValue);El resultado debe validarse. El dato puede estar corrupto, desactualizado o haber sido modificado manualmente.
localStorage.setItem("theme", "dark");Persistente no significa permanente: el usuario, navegador, políticas de privacidad o límites de almacenamiento pueden eliminarlo.
sessionStorage.setItem(
"checkout-step",
"delivery",
);Abrir una pestaña desde otra puede comenzar con una copia inicial en algunos casos, pero después los almacenes evolucionan de forma independiente.
El almacenamiento está separado por origen:
scheme + host + porthttps://example.com
http://example.com
https://example.com:8443representan orígenes distintos.
El comportamiento para esquemas como file: no debe utilizarse como contrato portable.
localStorage.setItem(key, largeValue);La serialización y escritura ocurren en el hilo actual. Operaciones frecuentes o datos grandes pueden bloquear la interfaz.
Usa IndexedDB cuando necesitas:
try {
localStorage.setItem(key, value);
} catch (error) {
if (error.name === "QuotaExceededError") {
handleStorageFull();
} else {
throw error;
}
}El acceso también puede fallar por políticas del navegador, privacidad, sandboxing o restricciones del usuario.
No dependas de una cifra fija de megabytes como garantía universal.
Cuando otro documento del mismo origen modifica localStorage, otras ventanas pueden recibir:
window.addEventListener("storage", (event) => {
console.log(
event.key,
event.oldValue,
event.newValue,
);
});El documento que realizó el cambio no recibe normalmente su propio evento storage.
sessionStorage tiene un alcance más reducido y sus eventos solo aplican a contextos que comparten esa sesión.
Cada operación es individual.
const value = Number(localStorage.getItem("count") ?? 0);
localStorage.setItem("count", String(value + 1));Dos pestañas pueden leer el mismo valor y sobrescribir actualizaciones. Web Storage no ofrece transacciones ni compare-and-swap.
const storedPreferences = {
version: 2,
value: preferences,
};Al cambiar el esquema:
function readJson(storage, key, parse) {
const rawValue = storage.getItem(key);
if (rawValue === null) {
return null;
}
try {
return parse(JSON.parse(rawValue));
} catch {
storage.removeItem(key);
return null;
}
}La función no solo parsea JSON: valida y define qué hacer con datos inválidos.
Cualquier JavaScript que se ejecute en el origen puede leer Web Storage.
Por eso no es una ubicación segura para:
Una vulnerabilidad XSS puede acceder al almacenamiento. Cifrar en frontend con una clave disponible al mismo JavaScript no elimina ese riesgo.
No existe una respuesta universal para todas las arquitecturas, pero almacenar tokens de sesión accesibles a JavaScript aumenta el impacto de XSS.
Para sesiones web tradicionales suelen preferirse cookies HttpOnly, Secure y con una política SameSite apropiada, junto con protección CSRF y diseño del servidor.
Web Storage puede guardar estado de UI, pero no debe presentarse como un sistema de autenticación seguro por sí solo.
const STORAGE_KEY = "preferences:v2";
function savePreferences(preferences) {
localStorage.setItem(
STORAGE_KEY,
JSON.stringify({
version: 2,
value: preferences,
}),
);
}
function loadPreferences() {
return readJson(
localStorage,
STORAGE_KEY,
(data) => {
if (
data?.version !== 2 ||
typeof data.value?.theme !== "string"
) {
throw new Error("Invalid preferences");
}
return data.value;
},
);
}JSON.parse(null) sin distinguir ausencia.¿Por qué sessionStorage no convierte una sesión de autenticación en segura?
Porque cualquier JavaScript ejecutado en la página puede acceder a sus datos. Una vulnerabilidad XSS podría leer el token igual que en localStorage.
Cookies explica el mecanismo que el navegador puede enviar automáticamente en solicitudes HTTP.