Almacenamiento local de HTML

Almacenamiento local de HTML: superior a las cookies.

¿Qué es el almacenamiento local de HTML?

A través del almacenamiento local (Local Storage), las aplicaciones web pueden almacenar datos localmente en el navegador del usuario.

Antes de HTML5, los datos de la aplicación solo podían almacenarse en cookies, incluyendo cada solicitud del servidor. El almacenamiento local es más seguro y puede almacenar grandes cantidades de datos localmente sin afectar el rendimiento del sitio.

A diferencia de las cookies, las limitaciones de almacenamiento son mucho mayores (al menos 5 MB), y la información no se transmite al servidor.

El almacenamiento local pasa por el origen (origin) (a través de dominio y protocolo). Todas las páginas, desde el origen, pueden almacenar y acceder a los mismos datos.

Compatibilidad del navegador

El array en la tabla indica la versión del navegador que admite completamente el almacenamiento local.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

Objeto de almacenamiento local HTML

HTML almacenamiento local ofrece dos objetos para almacenar datos en el cliente:

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

Al usar almacenamiento local, verifique la compatibilidad del navegador con localStorage y sessionStorage:

if (typeof(Storage) !== "undefined") {
    // Código para localStorage/sessionStorage
} else {
    // Disculpe! No se admite Web Storage ..
}

Objeto localStorage

El objeto localStorage almacena datos sin fecha de vencimiento. Los datos no se eliminan cuando se cierra el navegador y están disponibles el próximo día, semana o año.

Ejemplo

// Almacenar
localStorage.setItem("lastname", "Gates");
// Recuperar
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Prueba personalmente

Explicación del ejemplo:

  • Crear un par de nombre/valor en localStorage, donde: name="lastname", value="Gates"
  • Recuperar el valor de "lastname" y colocarlo en el elemento con id="result"

El ejemplo anterior también se puede escribir de la siguiente manera:

// Almacenar
localStorage.lastname = "Gates";
// Recuperar
document.getElementById("result").innerHTML = localStorage.lastname;

La sintaxis para eliminar el proyecto localStorage "lastname" es la siguiente:

localStorage.removeItem("lastname");

Notas: Los pares de nombre/valor se almacenan siempre como cadenas. ¡Recuerda convertirlos a otros formatos si es necesario!

El siguiente ejemplo cuenta el número de veces que el usuario hace clic en un botón. En el código, la cadena de valores se convierte en un número y se incrementa el recuento en sucesión:

Ejemplo

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Ha hecho clic en este botón " +
localStorage.clickcount + " veces.";

Prueba personalmente

Objeto sessionStorage

El objeto sessionStorage es equivalente al objeto localStorage, la diferencia es que solo almacena datos en una session. Si el usuario cierra una pestaña específica del navegador, los datos también se eliminarán.

El siguiente ejemplo realiza un conteo de clics del usuario en el botón en la session actual:

Ejemplo

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "En esta session, ya ha hecho clic en este botón " +
sessionStorage.clickcount + " veces.";

Prueba personalmente