HTML Web Storage
Antes, canvas era un mapa de bits vacío que pintaba JavaScript. Esta lección deja el dibujo y presenta Web Storage: recordar cadenas clave/valor pequeñas en el navegador con localStorage y sessionStorage. HTML sigue cargando un script; ese script llama APIs de almacenamiento. Alcance práctico — guardar/leer y duración — no cookies, IndexedDB ni base de datos de servidor.
Por qué web storage en un curso HTML
Los principiantes quieren que un tema o nombre sobreviva al refrescar. Web Storage es la primera herramienta habitual. Tras canvas, la división es otra: HTML posee la cáscara; JS el recordar cadenas para ese origen. Bastan setItem, getItem y local vs session.
Respuesta directa
1) localStorage.setItem guarda una cadena. 2) getItem la lee. 3) localStorage hasta borrarla. 4) sessionStorage para la pestaña/sesión. 5) Ninguna etiqueta HTML sustituye las APIs. 6) Solo preferencias ligeras; los objetos necesitan JSON porque los valores son cadenas.
📊 localStorage vs sessionStorage
| Topic | localStorage | sessionStorage |
|---|---|---|
| Typical lifetime | Until cleared by user/site/code | Until the tab/session ends |
| Survives browser restart | Usually yes (same origin) | No |
| Shared across tabs (same origin) | Yes (same storage) | No (per tab/session) |
| API shape | setItem / getItem / removeItem | Same method names |
| Beginner fit | Theme, language preference | One-tab wizard draft, temp flags |
| This course depth | Intro save/read only | Intro save/read only |
Mini demo localStorage
Un clic guarda un saludo y lo muestra en un párrafo. Tras refrescar, getItem sigue encontrando el valor para ese origen — la idea «local».
<button id="save" type="button">Remember hi</button>
<p id="out"></p>
<script>
const out = document.getElementById("out");
const saved = localStorage.getItem("greet");
if (saved) {
out.textContent = "Saved: " + saved;
}
document.getElementById("save").onclick = function () {
localStorage.setItem("greet", "hi");
out.textContent = "Saved: " + localStorage.getItem("greet");
};
</script>
Leer las llamadas localStorage
- localStorage es un objeto del navegador para scripts de la página
- setItem guarda la cadena bajo una clave
- getItem la lee (o null)
- Mostrarla en p prueba persistencia sin dibujar (a diferencia de canvas)
- Claves y valores son cadenas
- Borrar: removeItem o DevTools
sessionStorage para datos solo de pestaña
Mismos nombres de métodos, vida más corta. Útil para un borrador de una pestaña que desaparece al cerrarla.
<label for="note">Tab-only note</label>
<input id="note" type="text" />
<button id="keep" type="button">Keep in this tab</button>
<p id="shown"></p>
<script>
const input = document.getElementById("note");
const shown = document.getElementById("shown");
const prior = sessionStorage.getItem("note");
if (prior) {
input.value = prior;
shown.textContent = "Restored in this tab: " + prior;
}
document.getElementById("keep").onclick = function () {
sessionStorage.setItem("note", input.value);
shown.textContent = "Kept: " + sessionStorage.getItem("note");
};
</script>
Leer la idea sessionStorage
- Mismo patrón setItem/getItem
- Se restaura al refrescar en la misma pestaña
- Otra pestaña no ve los mismos datos
- Siguen siendo cadenas; no para contraseñas
- Elige local vs session por duración
- Siguiente: geolocation
Qué guardar
- Tema/idioma: localStorage
- Flag de asistente solo esta pestaña: sessionStorage
- Secretos: ninguno
- Archivos grandes: fuera de esta intro
- Cuentas de servidor: backend
- Dibujar píxeles: fue canvas
Práctica — recordar una preferencia
- Pega la demo localStorage y guarda.
- Recarga; confirma restauración.
- Prueba sessionStorage en la misma pestaña.
- Cierra la pestaña y vuelve a abrir.
- Guarda un número — vuelve como cadena.
- Frase: canvas pinta píxeles; Web Storage guarda cadenas.
- Vista previa: geolocation.
Errores fáciles
- Esperar una etiqueta storage
- Guardar contraseñas
- Olvidar que son cadenas (JSON para objetos)
- Confundir con canvas o cookies
- Creer que sessionStorage dura para siempre
- Asumir compartir con otros dispositivos
- Tomar la intro como curso de bases de datos
Resumen
- Web Storage es una API JS: localStorage y sessionStorage
- setItem/getItem guardan cadenas para tu origen
- local hasta borrar; session para pestaña/sesión
- Para preferencias ligeras — no secretos
- Canvas eran píxeles; esta lección cadenas recordadas
- Siguiente: geolocation en HTML
🧠 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