Almacenamiento Web Storage API

Introducción

Web Storage es una API de JavaScript que permite almacenar datos en forma de pares clave-valor de manera local y persistente (en el caso de localStorage) en el navegador del usuario. Se trata de un avance sobre otros sistemas, como las cookies, para conseguir almacenar datos en el navegador. A diferencia de éstas (que se envían en cada solicitud al servidor), los datos en localStorage se guardan solo en el navegador y están disponibles para todas las páginas del mismo origen (protocolo, dominio y puerto). Para preservar la seguridad el almacenamiento se realiza por dominio, de forma que los datos almacenados por un sitio o dominio no pueden ser accedidos desde otro sitio o dominio. Estos datos no tienen fecha de caducidad, es decir, permanecen en el navegador hasta que el usuario los borra o los borra el propio script.

Ventajas

Algunas de las ventajas de utilizar localStorage sobre otros sistemas son:

  • Persistencia: Los datos no se borran al cerrar el navegador, a diferencia de sessionStorage.
  • Almacenamiento local: No se envía información al servidor en cada solicitud, lo que mejora la velocidad.
  • Simplicidad: Es fácil de usar y no requiere configuración adicional.
  • Capacidad: Permite almacenar hasta 5 MB de datos (aunque varía entre navegadores).

Desarrollo

La API define dos tipos de áreas de almacenamiento, localStorage y sessionStorage. En el caso de la primera los datos persisten en el navegador aun cuando se cierre la sesión (salvo que sean explícitamente borrados), mientras que en la segunda los datos son eliminados al cerrar la ventana del navegador. Aunque el espacio disponible depende del navegador utilizado, todos los navegadores permiten utilizar al menos 5Mb de espacio de almacenamiento.

Los datos, almacenados en forma de pares clave-valor, se guardan en formato cadena, de manera que si se desea trabajar con los datos en otro formato éstos deben ser tratados debidamente a través de las funciones correspondientes (parseInt(), JSON.stringify(), …).

Antes de comenzar se puede comprobar que el navegador soporta la API. En el ejemplo se muestra cómo detectar la existencia del objeto localStorage (se haría de forma idéntica con el objeto sessionStorage).

function comprobarLocalStorage() {
   try {
      return "localStorage" in window && window["localStorage"] !== null;
   } catch (e) {
     return false;
   }
}

Cómo almacenar datos

Para almacenar datos en el navegador se utiliza el método setItem() acompañado de dos argumentos, la clave y el valor a almacenar.

localStorage.setItem("key", "value");
sessionStorage.setItem("key2", "value2");

Cómo recupera datos

Para recuperar datos almacenados en el navegador se utiliza el método getItem() acompañado de la clave a recuperar.

var a = localStorage.getItem("key");
var b = sessionStorage.getItem("key2");

Una forma de recuperar todos los pares clave-valor almacenados sería a través del siguiente código:

for (var i = 0; i < localStorage.length; i++) {
      var clave = localStorage.key(i);
      var valor = localStorage.getItem(clave);
 
      alert( clave + " " + valor);
}

Cómo eliminar datos

Para eliminar un dato almacenado se utiliza el método removeItem(), indicando como parámetro el valor de la clave a eliminar. También es posible utilizar el operador delete. Si se desea eliminar todos los elementos almacenados en una sola instrucción se puede utilizar el método clear().

localStorage.removeItem("key");
delete sessionStorage("key2");
localStorage.clear();

Ejemplos

A continuación se muestra un ejemplo donde se permite alternar entre «modo claro» y «modo oscuro» a través de un botón. La opción elegida es almacenada en el localStorage y recuperada al cargar la página.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guardar preferencia de color en localStorage</title>
    <link rel="stylesheet" href="./estilos.css">
    <script src="./modoOscuro.js" defer></script>
</head>
<body>

    <h1>Ejemplo uso localStorage</h1>
    <button id="toggle">Cambiar Tema</button>
    <p>Este ejemplo permite alternar entre un "modo claro" y un "modo oscuro", almacenando la selección en el localStorage. Al cargar la página, recupera la selección almacenada.</p>
</body>
</html>

Código del fichero «modoOscuro.js».

document.getElementById('toggle').addEventListener('click', function toggleTheme() {
    document.body.classList.toggle("dark");
    const theme = document.body.classList.contains("dark") ? "dark" : "light";
    localStorage.setItem("theme", theme);
})

window.onload = function () {
    const savedTheme = localStorage.getItem("theme");
    if (savedTheme === "dark") {
        document.body.classList.add("dark");
    }
};

Código del fichero «estilos.css»:

body {
    font-family: Arial, sans-serif;
    background-color: white;
    color: black;
    transition: background-color 0.3s, color 0.3s;
}
body.dark {
    background-color: black;
    color: white;
}