HTML Web Storage API

---

Las web storage son mejores que las cookies.

---

¿Qué es web storage?

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

Antes de HTML5, los datos de una aplicación web tenían que almacenarse en cookies, incluidas en cada solicitud del servidor. El almacenamiento web (web storage) 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 web (web storage) es mucho mayor (al menos 5 MB) y la información nunca se transfiere al servidor.

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

---

Compatibilidad con el navegador

El número en la siguiente tabla, especifica la primera versión del navegador que fue completamente compatible con web storage:

---

Los objetos web storage

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

• window.localStorage - almacena datos sin fecha de expiración

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

Antes de usar web storage, compruebe la compatibilidad de su navegador con localStorage y sessionStorage:

Ejemplo:

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

---

El objeto localStorage

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:

if (typeof Storage !== "indefinido") {
  // Store
  localStorage.setItem("apellido", "Perez");
  // Retrieve
  document.getElementById("resultado").innerHTML = localStorage.getItem(
    "apellido"
  );
} else {
  document.getElementById("resultado").innerHTML =
    "Disculpe, su navegador no soporta web storage...";
}

Ejemplo explicado:

• Crea un objeto localStorage con nombre (name="apellido") y valor (value="perez").

• Recupera el valor de “apellido” e insértalo en el elemento con valor id="resultado".

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

// Almacena
localStorage.apellido = "Perez";
// Recupera
document.getElementById("resultado").innerHTML = localStorage.apellido;

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

localStorage.removeItem("apellido");

Nota: los pares name/value 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 value se convierte en un número para poder aumentar el contador:

Ejemplo:

function clickCounter() {
  if (typeof(Storage) !== "indefinido") {
    if (localStorage.clickcount) {
      localStorage.clickcount = Number(localStorage.clickcount)+1;
    } else {
      localStorage.clickcount = 1;
    }
    document.getElementById("resultado").innerHTML = "Haz hecho clic en el botón " + localStorage.clickcount + " veces(s).";
  } else {
    document.getElementById("resultado").innerHTML = "Disculpe, su navegador no soporta web storage...";
  }
}

---

El objeto sessionStorage

El objeto sessionStorage 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 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:

function clickCounter() {
  if (typeof(Storage) !== "indefinido") {
    if (sessionStorage.clickcount) {
      sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
    } else {
      sessionStorage.clickcount = 1;
    }
    document.getElementById("resultado").innerHTML = "Haz hecho clic en el botón " + sessionStorage.clickcount + " vece(s) en esta sesión.";
  } else {
    document.getElementById("resultado").innerHTML = "Disculpe, su navegador no soporta web storage...";
  }
}

---

Resumen

Con el almacenamiento web, las aplicaciones web puedes almacenar datos localmente dentro del navegador del usuario. El almacenamiento local es mucho mejor que las cookies.

---

Traducido con 💚 desde W3Schools.com