Almacenamiento web
El invitado lida y la bebida tea quedan en esta página, así que la línea muestra saved / lida / tea. Cerrar el navegador no borra localStorage. El navegador guarda una nota breve, y solo para este sitio.
Otra página, otro final
Las cookies llegan más adelante. Este almacén no viaja pegado a cada petición que envía el navegador. true / Order: mint cerró la página de patrones. Si la clave no existe, getItem no lanza nada y devuelve null.
El número también es texto
setItem escribe bajo una clave y getItem la recupera. Un número queda guardado como texto.
localStorage.setItem("drink", "tea");
console.log(localStorage.getItem("drink"));
console.log(localStorage.getItem("size"));
Tras recargar, getItem("drink") sigue siendo tea. setItem("count", 2) guarda los caracteres 2, no el número. La consola enseña tea y después null, porque size nunca se escribió.
El objeto tiene que viajar en texto
JSON.parse(null) lanza, así que lee primero y no analices cuando el valor sea null. JSON.stringify fabrica texto que sí se puede guardar, y JSON.parse reconstruye el objeto. Pasar un objeto plano a setItem deja el texto [object Object].
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const raw = localStorage.getItem("w3-order");
const back = JSON.parse(raw);
console.log(back.guest + " / " + back.drink);
El registro es lida / tea. Cualquier página del mismo origen puede leer esa clave. w3-order contiene texto, y el valor analizado vuelve a ser un objeto.
La pestaña, o el navegador entero
clear borra todas las claves de este origen: no lo llames solo para ordenar un pedido. removeItem borra una sola clave. sessionStorage ofrece los mismos tres métodos y dura hasta que esa pestaña se cierra. localStorage sigue ahí cuando el navegador se abre otra vez.
sessionStorage.setItem("drink", "mint");
console.log(sessionStorage.getItem("drink"));
sessionStorage.removeItem("drink");
console.log(sessionStorage.getItem("drink"));
La clave w3-order de localStorage está en las dos pestañas. Una segunda pestaña no ve esa clave de sessionStorage. Cerrar la pestaña suelta únicamente la nota de sesión. Primero sale mint y luego null.
El mismo origen, todas las páginas
Otro sitio no puede leer la caja. Una clave puesta en la página de inicio se ve en la página del pedido del mismo sitio. El esquema, el host y el puerto la comparten. No es una caja de un solo archivo.
La página muestra el pedido
La página escribe el pedido, lo vuelve a leer y muestra al invitado y la bebida.
<!DOCTYPE html>
<html>
<body>
<p id="line">…</p>
<script>
const order = { guest: "lida", drink: "tea" };
localStorage.setItem("w3-order", JSON.stringify(order));
const back = JSON.parse(localStorage.getItem("w3-order"));
document.querySelector("#line").textContent =
"saved / " + back.guest + " / " + back.drink;
</script>
</body>
</html>
La línea dice saved / lida / tea. Recarga y las mismas palabras vuelven desde localStorage. true / Order: mint era la página de patrones.
Cinco pasos cortos
- Con setItem pon drink en tea. getItem devuelve tea.
- Pide size con getItem. Sale null.
- Guarda el pedido con JSON.stringify. Tras JSON.parse el registro es lida / tea.
- Mete mint en sessionStorage y llama a removeItem. getItem devuelve null.
- Lee la página. La línea es saved / lida / tea.
Tropiezos
El almacén recuerda cadenas, no objetos vivos. clear es el origen entero, no una clave.
- Pasar un objeto y luego leer [object Object]
- Llamar a JSON.parse sobre null
- Esperar que sessionStorage sobreviva en una pestaña nueva
- Llamar a clear y borrar todas las claves
- Leer la línea como true / Order: mint
Qué conviene guardar
- setItem y getItem guardan y leen cadenas
- una clave ausente es null
- los objetos entran con JSON.stringify y salen con JSON.parse
- localStorage sobrevive a un reinicio
- sessionStorage termina con la pestaña
- la línea de la página es saved / lida / tea
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior