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 primera 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 Storage 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 el 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 en el siguiente día, semana o año.

Ejemplo

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

Pruebe usted mismo

Explicación del ejemplo:

  • Crear un par de nombre/valor en localStorage, donde: name="lastname", value="Gates"
  • Recuperar el valor de "lastname" y agregarlo al 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 realiza un conteo de la cantidad 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 conteo 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.";

Pruebe usted mismo

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 cuenta los 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.";

Pruebe usted mismo