La API de almacenamiento web: almacenamiento local y almacenamiento de sesiones

La API de almacenamiento web proporciona una forma de almacenar datos en el navegador. Define dos mecanismos de almacenamiento que son muy importantes: Session Storage y Local Storage, parte del conjunto de opciones de almacenamiento disponibles en la Plataforma Web.

Introducción

La API de almacenamiento web define dos mecanismos de almacenamiento que son muy importantes:Almacenamiento de sesionesyAlmacenamiento local.

Forman parte del conjunto de opciones de almacenamiento disponibles en la Plataforma Web, que incluye:

Application Cache está en desuso y Web SQL no está implementado en Firefox, Edge e IE.

Tanto el almacenamiento de sesiones como el almacenamiento local proporcionan un área privada para sus datos. Otros sitios web no pueden acceder a los datos que almacena.

El almacenamiento de sesión mantiene los datos almacenados en él durante la duración de la sesión de la página. Si varias ventanas o pestañas visitan el mismo sitio, tendrán dos instancias de almacenamiento de sesión diferentes.

Cuando se cierra una pestaña / ventana, se borra el Almacenamiento de sesión para esa pestaña / ventana en particular.

El almacenamiento de sesiones está destinado a permitir el escenario de manejo de diferentes procesos que ocurren en el mismo sitio de forma independiente, algo que no es posible con las cookies, por ejemplo, que se comparten en todas las sesiones.

En cambio, Local Storage conserva los datos hasta que se eliminan explícitamente, ya sea por usted o por el usuario. Nunca se limpia automáticamente y se comparte en todas las sesiones que acceden a un sitio.

Tanto el almacenamiento local como el almacenamiento de sesiones sonprotocolo específico: datos almacenados cuando se accede a la página utilizandohttpno está disponible cuando la página se publica conhttps, y viceversa.

El almacenamiento web solo es accesible en el navegador. No se envía al servidor como lo hacen las cookies.

Cómo acceder al almacenamiento

Tanto el almacenamiento local como el de sesión están disponibles en elwindowobjeto, para que pueda acceder a ellos usandosessionStorageylocalStorage.

Su conjunto de propiedades y métodos es exactamente el mismo, porque devuelven el mismo objeto, unAlmacenamientoobjeto.

El objeto de almacenamiento tiene una propiedad única,length, que es el número de elementos de datos almacenados en él.

Métodos

setItem(key, value)

setItem()agrega un artículo al almacenamiento. Acepta una cadena como clave y una cadena como valor:

localStorage.setItem('username', 'flaviocopes')
localStorage.setItem('id', '123')

Si pasa cualquier valor que no sea una cadena, se convertirá en una cadena:

localStorage.setItem('test', 123) //stored as the '123' string
localStorage.setItem('test', { test: 1 }) //stored as "[object Object]"

getItem(key)

getItem()es la forma de recuperar un valor de cadena del almacenamiento, utilizando la cadena de clave que se usó para almacenarlo:

localStorage.getItem('username') // 'flaviocopes'
localStorage.getItem('id') // '123'

removeItem(key)

removeItem()elimina el elemento identificado porkeydel almacenamiento, sin devolver nada (unundefinedvalor):

localStorage.removeItem('id')

key(n)

Cada artículo que almacena tiene un número de índice.

Puede parecer que el número es consecutivo, por lo que la primera vez que utilicesetItem(), ese elemento puede ser referenciado usandokey(0), el siguiente conkey(1)y así sucesivamente, pero no lo es. MDN dice "El orden de las claves está definido por el usuario-agente, por lo que no debe confiar en él".

Si hace referencia a un número que no apunta a un elemento de almacenamiento, devuelvenull.

clear()

clear()elimina todo del objeto de almacenamiento que está manipulando:

localStorage.setItem('a', 'a')
localStorage.setItem('b', 'b')
localStorage.length //2
localStorage.clear()
localStorage.length //0

Límites de tamaño de almacenamiento

A través de la API de almacenamiento, puede almacenar muchos más datos de los que podría almacenar con las cookies.

La cantidad de almacenamiento disponible en la Web puede variar según el tipo de almacenamiento (local o de sesión), el navegador y el tipo de dispositivo. Ainvestigaciónby html5rocks.com señala esos límites:

Escritorio

  • Chrome, IE, Firefox: 10 MB
  • Safari: 5 MB para almacenamiento local, almacenamiento de sesiones ilimitado

Móvil

  • Chrome, Firefox: 10 MB
  • iOS Safari y WebView: 5 MB para almacenamiento local, almacenamiento de sesiones ilimitado a menos que en iOS6 y iOS7 sea de 5 MB
  • Navegador Android: 2 MB de almacenamiento local, almacenamiento de sesiones ilimitado

Superando la cuota

Debe manejar los errores de cuota, especialmente si almacena muchos datos. Puedes hacerlo con un try / catch:

try {
  localStorage.setItem('key', 'value')
} catch (domException) {
  if (
    ['QuotaExceededError', 'NS_ERROR_DOM_QUOTA_REACHED'].includes(
      domException.name
    )
  ) {
    // handle quota limit exceeded error
  }
}

Herramientas de desarrollo

Las DevTools de los principales navegadores ofrecen una interfaz agradable para inspeccionar y manipular los datos almacenados en el almacenamiento local y de sesión.

Cromo

Chrome DevTools local storage

Firefox

Firefox DevTools local storage

Safari

Safari DevTools local storage


Más tutoriales de navegador:


Tech Wiki en línea!