Tutorial HTML

INICIO HTML Introducción HTML Editores HTML HTML básico Elementos HTML Atributos HTML Encabezados HTML Párrafos HTML Estilos HTML Formato HTML Cotizaciones HTML Comentarios HTML Colores HTML CSS HTML Enlaces HTML Imágenes HTML icono de favoritos HTML Tablas HTML Listas HTML Bloque HTML y en línea Clases HTML Identificación HTML Marcos flotantes HTML HTML JavaScript Rutas de archivo HTML Encabezado HTML Diseño HTML Responsivo HTML Código informático HTML Semántica HTML Guía de estilo HTML Entidades HTML Símbolos HTML Emoticonos HTML Juego de caracteres HTML Codificación de URL HTML HTML frente a XHTML

Formularios HTML

Formularios HTML Atributos de formulario HTML Elementos de formulario HTML Tipos de entrada HTML Atributos de entrada HTML Atributos de formulario de entrada HTML

Gráficos HTML

Lienzo HTML HTML SVG

Medios HTML

Medios HTML Vídeo HTML Audio HTML Complementos HTML HTML de YouTube

API de HTML

Geolocalización HTML Arrastrar/soltar HTML Almacenamiento web HTML Trabajadores web HTML SSE HTML

Ejemplos HTML

Ejemplos HTML Cuestionario HTML Ejercicios HTML Certificado HTML Resumen HTML Accesibilidad HTML

Referencias HTML

Lista de etiquetas HTML Atributos HTML Atributos globales HTML Compatibilidad con navegador HTML Eventos HTML Colores HTML Lienzo HTML Audio/vídeo HTML Tipos de documentos HTML Conjuntos de caracteres HTML Codificación de URL HTML Códigos de idioma HTML Mensajes HTTP Métodos HTTP Convertidor PX a EM Atajos de teclado

API de almacenamiento web HTML


almacenamiento web HTML; mejor que las galletas.


¿Qué es el almacenamiento web HTML?

Con el almacenamiento web, las aplicaciones web pueden almacenar datos localmente dentro del navegador del usuario.

Antes de HTML5, los datos de la aplicación tenían que almacenarse en cookies, incluidas en cada solicitud del servidor. El almacenamiento web es más seguro y se pueden almacenar grandes cantidades de datos localmente, sin afectar el rendimiento del sitio web.

A diferencia de las cookies, el límite de almacenamiento es mucho mayor (al menos 5 MB) y la información nunca se transfiere al servidor.

El almacenamiento web es por origen (por dominio y protocolo). Todas las páginas, desde un origen, pueden almacenar y acceder a los mismos datos.


Compatibilidad con navegador

Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el almacenamiento web.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

Objetos de almacenamiento web HTML

El almacenamiento web HTML proporciona dos objetos para almacenar datos en el cliente:

  • window.localStorage - almacena datos sin fecha de caducidad
  • window.sessionStorage - almacena datos para una sesión (los datos se pierden cuando se cierra la pestaña del navegador)

Antes de usar el almacenamiento web, compruebe la compatibilidad del navegador con localStorage y sessionStorage:

if (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}


El objeto de almacenamiento local

El objeto localStorage almacena los datos sin fecha de caducidad. Los datos no se eliminarán cuando se cierre el navegador y estarán disponibles al día, semana o año siguiente.

Ejemplo

// Store
localStorage.setItem("lastname", "Smith");

// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Ejemplo explicado:

  • Cree un par de nombre/valor de almacenamiento local con nombre="apellido" y valor="Smith"
  • Recupere el valor de "apellido" e insértelo en el elemento con id="resultado"

El ejemplo anterior también podría escribirse así:

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;

La sintaxis para eliminar el elemento localStorage "apellido" es la siguiente:

localStorage.removeItem("lastname");

Nota: Los pares de nombre/valor siempre se almacenan como cadenas. ¡Recuerde convertirlos a otro formato cuando sea necesario!

El siguiente ejemplo cuenta el número de veces que un usuario ha hecho clic en un botón. En este código, la cadena de valor se convierte en un número para poder aumentar el contador:

Ejemplo

if (localStorage.clickcount) {
  localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
  localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";

El objeto sessionStorage

El sessionStorageobjeto es igual al objeto localStorage, excepto que almacena los datos para una sola sesión. Los datos se eliminan cuando el usuario cierra la pestaña específica del navegador.

El siguiente ejemplo cuenta la cantidad de veces que un usuario ha hecho clic en un botón en la sesión actual:

Ejemplo

if (sessionStorage.clickcount) {
  sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
  sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";