El almacenamiento web , a veces conocido como almacenamiento DOM ( almacenamiento del modelo de objetos de documento ), es una API de JavaScript estándar proporcionada por los navegadores web . Permite que los sitios web almacenen datos persistentes en los dispositivos de los usuarios de manera 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 World Wide Web Consortium (W3C) [3] y WHATWG , [4] y es compatible con los principales navegadores.
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 agregan automáticamente a todas las solicitudes y pueden acceder a ellos tanto el lado del servidor como el del cliente. El almacenamiento web cae 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 scripts explícitos del lado del cliente, lo que permite ajustar la interacción deseada del servidor.
Las cookies están restringidas a 4 kilobytes. El almacenamiento web proporciona una capacidad de almacenamiento mucho mayor:
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 son por origen: la combinación de protocolo, nombre de host y número de puerto tal como se define en la política del 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 la sesión es tanto por origen como por instancia (por ventana o por pestaña) y está limitado a la vida útil de la instancia. El almacenamiento de sesiones 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 las cookies no admiten bien. [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 almacenamiento web tienen objetos globales sessionStoragey localStoragese declaran a nivel de ventana. El siguiente código JavaScript se puede utilizar en estos navegadores para activar el comportamiento de almacenamiento web:
// Almacena el valor en el navegador durante la sesión sessionStorage . setItem ( 'clave' , 'valor' ); // Recuperar valor (se elimina cuando el navegador se cierra y se vuelve a abrir) ... alert ( sessionStorage . getItem ( 'key' ));// Almacenar valor en el navegador más allá de la duración de la sesión localStorage . setItem ( 'clave' , 'valor' ); // Recuperar valor (persiste incluso después de cerrar y volver a abrir el navegador) alerta ( 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 en una cadena en la mayoría de los navegadores. Sin embargo, la conversión a JSON permite el almacenamiento eficaz de objetos JavaScript.
// Almacena un objeto en lugar de una cadena localStorage . setItem ( 'clave' , { nombre : 'valor' }); alerta ( tipo de almacenamiento local . getItem ( 'clave' )); // cadena // Almacena un número entero en lugar de una cadena localStorage . setItem ( 'clave' , 1 ); alerta ( tipo de almacenamiento local . getItem ( 'clave' )); // cadena // Almacena un objeto usando JSON localStorage . setItem ( 'clave' , JSON . stringify ({ nombre : 'valor' })); alerta ( JSON . parse ( localStorage . getItem ( 'clave' )). nombre ); // 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 "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 disponibles para los scripts en aplicaciones web, y no implica necesariamente la existencia de un objeto 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 formas para que los usuarios habiliten o deshabiliten de forma nativa el almacenamiento web, o borre el "caché" del almacenamiento web. [16] También se encuentran 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:
webappsstore.sqlite llamado en la carpeta de perfil del usuario. [17]\AppData\Local\Google\Chrome\User Data\Default\Local Storage" en Windows y " ~/Library/Application Support/Google/Chrome/Default/Local Storage" en macOS .\AppData\Roaming\Opera\Opera\sessions\autosave.win" o " \AppData\Local\Opera\Opera\pstorage\" dependiendo de la versión de Opera.\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage es " ".LocalStorage se encuentra en una carpeta denominada " " dentro de una carpeta " " oculta safari. [18]Si bien localStorage se usa 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: