stringtranslate.com

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.

Características

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

Objetivo

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.

Tamaño de almacenamiento

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

Almacenamiento local y de sesión

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]

Interfaz y modelo de datos

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 .

Uso

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   

Nomenclatura

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]

Gestión de almacenamiento web

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:

Tecnologías similares

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:

Referencias

  1. ^ ab Dixit, Shwetank (5 de marzo de 2013). "Almacenamiento web: almacenamiento de datos del lado del cliente más sencillo y potente". Dev.Opera . Consultado el 14 de mayo de 2021 .
  2. ^ Hume, Andy (24 de marzo de 2011). «localStorage no son cookies». andyhume.net . Archivado desde el original el 2 de junio de 2011 . Consultado el 14 de mayo de 2021 .
  3. ^ Hickson, Ian, ed. (28 de enero de 2021). "Web Storage (Segunda edición)". W3C . Grupo de trabajo de plataformas web . Consultado el 14 de mayo de 2021 .
  4. ^ WHATWG. «Estándar HTML § 12 Almacenamiento web». html.spec.whatwg.org . Consultado el 14 de mayo de 2021 .
  5. ^ ab Kitamura, Eiji (28 de enero de 2014). "Trabajar con cuotas en navegadores móviles: un informe de investigación sobre el almacenamiento del navegador - HTML5 Rocks". Archivado desde el original el 1 de febrero de 2014. Consultado el 4 de mayo de 2021 .
  6. ^ John Resig: Almacenamiento DOM. John Resig, ejohn.org . Consultado el 12 de junio de 2011.
  7. ^ michaeln (8 de marzo de 2013). "Problema 21680002: Se aumentó el límite de window.localstorage de 5 a 10 M. - Revisión de código". Revisiones de código de Chromium . Consultado el 14 de mayo de 2021 .
  8. ^ Microsoft (2016-10-20). "Introducción al almacenamiento web". Microsoft Docs . Microsoft . Consultado el 14 de mayo de 2021 .
  9. ^ W3C: borrador de estándar de almacenamiento web. Dev.w3.org (5 de febrero de 2004). Recuperado el 12 de junio de 2011.
  10. ^ W3C, 2011 http://dev.w3.org/html5/webstorage/
  11. ^ "DOM Storage". Mozilla Developer Network . Archivado desde el original el 4 de junio de 2011. Consultado el 12 de junio de 2011 .
  12. ^ "Web Storage API". Red de desarrolladores de Mozilla . Consultado el 28 de junio de 2017 .
  13. ^ "Introducción al almacenamiento DOM". Microsoft Developer Network . Archivado desde el original el 8 de junio de 2011. Consultado el 12 de junio de 2011 .
  14. ^ "Introducción al almacenamiento web". Microsoft Developer Network . Consultado el 28 de junio de 2017 .
  15. ^ W3C: borrador de estándar de almacenamiento web. Dev.w3.org (5 de febrero de 2004). Recuperado el 12 de junio de 2011.
  16. ^ Cómo habilitar, deshabilitar o borrar la memoria caché de "Almacenamiento web" de su navegador. mid.as. Consultado el 6 de octubre de 2022.
  17. ^ Webappsstore.sqlite kb.mozillazine.org
  18. ^ ¿ Dónde se almacenan los datos web de Safari? discussions.apple.com. Consultado el 20 de octubre de 2022.
  19. ^ "localStorage en aplicaciones modernas". RxDB . Consultado el 14 de agosto de 2023 .

Enlaces externos