Almacenamiento web

El almacenamiento web , a veces conocido como almacenamiento DOM ( almacenamiento de modelo de objetos de documento ), es una API estándar de JavaScript proporcionada por los navegadores web . Permite a los sitios web almacenar datos persistentes en los dispositivos de los usuarios de forma similar a las cookies , pero con una capacidad mucho mayor ^[1] y sin información enviada en encabezados HTTP . ^[2] Hay dos tipos principales de almacenamiento web: almacenamiento local y almacenamiento de sesión, que se comportan de manera similar a las cookies persistentes y las cookies de sesión respectivamente. El almacenamiento web está estandarizado por el Consorcio World Wide Web (W3C) ^[3] y WHATWG , ^[4] y es compatible con todos los navegadores principales.

El almacenamiento web se diferencia de las cookies en algunos aspectos clave.

Las cookies están destinadas a la comunicación con los servidores; se añaden automáticamente a todas las solicitudes y tanto el servidor como el cliente pueden acceder a ellas. El almacenamiento web se encuentra exclusivamente dentro del ámbito de las secuencias de comandos del lado del cliente . Los datos del almacenamiento web no se transmiten automáticamente al servidor en cada solicitud HTTP y un servidor web no puede escribir directamente en el almacenamiento web. Sin embargo, cualquiera de estos efectos se puede lograr con secuencias de comandos explícitas del lado del cliente, lo que permite ajustar la interacción deseada del servidor.

Las cookies tienen un límite de 4 kilobytes. El almacenamiento web ofrece una capacidad de almacenamiento mucho mayor:

• Opera 10.50+ permite 5 MB ^[1]
• Safari 8 permite 5 MB ^[5]
• Firefox 34 permite 10 MB ^[5] (antes 5 MB por origen en 2007 ^[6] )
• Google Chrome permite 10 MB por origen (antes 5 MB por origen) ^[7]
• Internet Explorer permite 10 MB por área de almacenamiento ^[8]

El almacenamiento web ofrece dos áreas de almacenamiento diferentes (almacenamiento local y almacenamiento de sesión), que difieren en alcance y duración. Los datos colocados en el almacenamiento local se almacenan por origen (la combinación de protocolo, nombre de host y número de puerto, tal como se define en la política de mismo origen) . Los datos están disponibles para todos los scripts cargados desde páginas del mismo origen que almacenaron previamente los datos y persisten después de cerrar el navegador. Como tal, el almacenamiento web no sufre los problemas de integridad débil y confidencialidad débil de las cookies, descritos en las secciones 8.5 y 8.6 de RFC  6265. El almacenamiento de sesión es tanto por origen como por instancia (por ventana o por pestaña) y está limitado a la duración de la instancia. El almacenamiento de sesión está destinado a permitir que instancias separadas de la misma aplicación web se ejecuten en diferentes ventanas sin interferir entre sí, un caso de uso que no es bien compatible con las cookies. ^[9]

El almacenamiento web proporciona una mejor interfaz programática que las cookies porque expone un modelo de datos de matriz asociativa donde las claves y los valores son cadenas .

Los navegadores que admiten el almacenamiento web tienen los objetos globales sessionStoragedeclarados localStorageen el nivel de ventana. El siguiente código JavaScript se puede utilizar en estos navegadores para activar el comportamiento del almacenamiento web:

// Almacena el valor en el navegador mientras dura la sesión sessionStorage . setItem ( 'key' , 'value' ); // Recuperar valor (se elimina cuando se cierra y se vuelve a abrir el navegador) ... alert ( sessionStorage.getItem ( ' key' ));// Almacenar valor en el navegador más allá de la duración de la sesión localStorage . setItem ( 'key' , 'value' ); // Recuperar valor (persiste incluso después de cerrar y volver a abrir el navegador) alert ( localStorage.getItem ( ' key' ));

Solo se pueden almacenar cadenas a través de la API de almacenamiento. ^[10] Intentar almacenar un tipo de datos diferente dará como resultado una conversión automática a una cadena en la mayoría de los navegadores. Sin embargo, la conversión a JSON permite un almacenamiento eficaz de objetos JavaScript.

// Almacena un objeto en lugar de una cadena localStorage . setItem ( 'key' , { name : 'value' }); alert ( typeof localStorage . getItem ( 'key' )); // cadena    // Almacena un entero en lugar de una cadena localStorage . setItem ( 'key' , 1 ); alert ( typeof localStorage . getItem ( 'key' )); // cadena   // Almacenar un objeto usando JSON localStorage . setItem ( 'key' , JSON . stringify ({ name : 'value' })); alert ( JSON . parse ( localStorage . getItem ( 'key' )). name ); // valor   

El borrador del W3C se titula "Almacenamiento web". "Almacenamiento DOM" también ha sido un nombre de uso común, aunque cada vez lo es menos; por ejemplo, los artículos web "Almacenamiento DOM" de los sitios para desarrolladores de Mozilla y Microsoft han sido reemplazados por artículos "Almacenamiento web". ^{[11] [12] [13] [14]}

El término "DOM" en el almacenamiento DOM no se refiere literalmente al Modelo de Objetos de Documento . Según el W3C, "el término DOM se utiliza para referirse al conjunto de API que se pone a disposición de los scripts en las aplicaciones web, y no implica necesariamente la existencia de un objeto de Documento real..." ^[15]

El almacenamiento de objetos de almacenamiento web está habilitado de forma predeterminada en las versiones actuales de todos los navegadores web compatibles, y los proveedores de navegadores ofrecen a los usuarios formas de habilitar o deshabilitar de forma nativa el almacenamiento web o de borrar el "caché" de almacenamiento web. ^{[16] También hay disponibles controles similares sobre el almacenamiento web a través de} extensiones de navegador de terceros . Cada navegador almacena los objetos de almacenamiento web de forma diferente:

• Firefox guarda los objetos de almacenamiento web en un archivo SQLite llamado webappsstore.sqliteen la carpeta de perfil del usuario. ^[17]
• Google Chrome registra los datos de almacenamiento web en un archivo SQLite en el perfil del usuario. La subcarpeta que contiene este archivo es " \AppData\Local\Google\Chrome\User Data\Default\Local Storage" en Windows y " ~/Library/Application Support/Google/Chrome/Default/Local Storage" en macOS .
• El almacenamiento web de Opera\AppData\Roaming\Opera\Opera\sessions\autosave.win se encuentra en " " o " \AppData\Local\Opera\Opera\pstorage\" según la versión de Opera.
• El almacenamiento web de Internet Explorer\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage es " ".
• El almacenamiento web de SafariLocalStorage se encuentra en una carpeta denominada " " dentro de una carpeta oculta " safari". ^[18]

Si bien localStorage se utiliza a menudo para almacenar pares clave-valor persistentes, han surgido otras API para permitir varios casos de uso como la indexación iterable ^[19] y con diferentes patrones de rendimiento:

• API de base de datos indexada
• Base de datos SQL web
• Cookie HTTP
• Sistema de archivos privado de origen (OPFS)

• Estándar de vida HTML 11 Almacenamiento web
• W3C: Almacenamiento web
• API de almacenamiento web en la red de desarrolladores de Mozilla
• Opera: Web Storage: almacenamiento de datos del lado del cliente más sencillo y potente
• Almacenamiento local en BlackBerry DevZone