El almacenamiento web , a veces conocido como almacenamiento DOM ( almacenamiento del modelo de objetos de documento ), proporciona a las aplicaciones web métodos y protocolos para almacenar datos del lado del cliente. El almacenamiento web admite el almacenamiento de datos persistente , similar a las cookies, pero con una capacidad muy mejorada [1] y sin información almacenada en el encabezado de solicitud 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] Todos los navegadores principales lo admiten.
Características
El almacenamiento web se diferencia de las cookies en algunos aspectos clave.
- Propósito
- Las cookies están destinadas a la comunicación con los servidores; se agregan automáticamente a todas las solicitudes y tanto el servidor como el cliente pueden acceder a ellos. El almacenamiento web cae exclusivamente dentro del ámbito de las secuencias de comandos del lado del cliente . Los datos de 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.
- Tamaño de almacenamiento
- Las cookies están restringidas a 4 kilobytes. El almacenamiento web proporciona una capacidad de almacenamiento mucho mayor:
- Almacenamiento local y de sesiones
- El almacenamiento web ofrece dos áreas de almacenamiento diferentes, almacenamiento local y almacenamiento de sesiones, 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 según 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 que se cierra el navegador. Como tal, el almacenamiento web no sufre problemas de integridad débil y confidencialidad débil de cookies, descritos en las secciones 8.5 y 8.6 del RFC 6265 . El almacenamiento de sesiones 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 no es bien compatible con las cookies. [9]
- Modelo de interfaz y datos
- El almacenamiento web proporciona una interfaz programática mejor que las cookies porque expone un modelo de datos de matriz asociativa donde las claves y los valores son cadenas . El Grupo de Trabajo de Aplicaciones Web del W3C está considerando una API adicional para acceder a datos estructurados . [10]
Uso
Los navegadores que admiten el almacenamiento web tienen los objetos globales sessionStorage
y se localStorage
declaran en el nivel de la ventana. El siguiente código JavaScript se puede utilizar en estos navegadores para activar el comportamiento del almacenamiento web:
// Almacenar 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 ( 'clave' ));// 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) alert ( localStorage . GetItem ( 'clave' ));
Solo las cadenas se pueden almacenar a través de la API de almacenamiento. [11] Intentar almacenar un tipo de datos diferente resultará en 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 efectivo de objetos JavaScript.
// Almacena un objeto en lugar de una cadena localStorage . setItem ( 'clave' , { nombre : 'valor' }); alert ( typeof localStorage . getItem ( 'clave' )); // cuerda// Almacena un número entero en lugar de una cadena localStorage . setItem ( 'clave' , 1 ); alert ( typeof localStorage . getItem ( 'clave' )); // cuerda// Almacene un objeto usando JSON localStorage . setItem ( 'clave' , JSON . stringify ({ nombre : 'valor' })); alert ( JSON . parse ( localStorage . getItem ( 'clave' )). nombre ); // 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 se han reemplazado por artículos "Almacenamiento web". [12] [13] [14] [15]
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 hacer referencia al conjunto de API disponible para scripts en aplicaciones web, y no implica necesariamente la existencia de un objeto de documento real ..." [16]
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 proporcionan formas para que los usuarios habiliten o deshabiliten de forma nativa el almacenamiento web o borren el "caché" del almacenamiento web. Los controles similares sobre el almacenamiento web también están disponibles 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.sqlite
en la carpeta de perfil del usuario. - 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 se encuentra en "
\AppData\Roaming\Opera\Opera\sessions\autosave.win
" o "\AppData\Local\Opera\Opera\pstorage\
" dependiendo de la versión de Opera. - El almacenamiento web de Internet Explorer es "
\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage
".
Ver también
- API de base de datos indexada
Referencias
- ^ a b Dixit, Shwetank (5 de marzo de 2013). "Almacenamiento web: almacenamiento de datos del lado del cliente más fácil y potente" . Dev.Opera . Consultado el 14 de mayo de 2021 .
- ^ 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 .
- ^ Hickson, Ian, ed. (28 de enero de 2021). "Almacenamiento web (segunda edición)" . W3C . Grupo de Trabajo Plataforma Web . Consultado el 14 de mayo de 2021 .
- ^ WHATWG. "HTML Standard § 12 Almacenamiento web" . html.spec.whatwg.org . Consultado el 14 de mayo de 2021 .
- ^ a b Kitamura, Eiji (28 de enero de 2014). "Trabajar con cuota 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 .
- ^ John Resig: Almacenamiento DOM . John Resig, ejohn.org . Consultado el 12 de junio de 2011.
- ^ michaeln (8 de marzo de 2013). "Problema 21680002: Aumento del límite de window.localstorage a 10M desde 5M. - Revisión de código" . Reseñas de Chromium Code . Consultado el 14 de mayo de 2021 .
- ^ Microsoft (20 de octubre de 2016). "Introducción al almacenamiento web" . Microsoft Docs . Microsoft . Consultado el 14 de mayo de 2021 .
- ^ W3C: borrador de estándar de almacenamiento web . Dev.w3.org (5 de febrero de 2004). Consultado el 12 de junio de 2011.
- ^ W3C: API de base de datos indexada . W3C. Consultado el 12 de febrero de 2012.
- ^ W3C, 2011 http://dev.w3.org/html5/webstorage/
- ^ "Almacenamiento DOM" . Red de desarrolladores de Mozilla . Archivado desde el original el 4 de junio de 2011 . Consultado el 12 de junio de 2011 .
- ^ "API de almacenamiento web" . Red de desarrolladores de Mozilla . Consultado el 28 de junio de 2017 .
- ^ "Introducción al almacenamiento DOM" . Red de desarrolladores de Microsoft . Archivado desde el original el 8 de junio de 2011 . Consultado el 12 de junio de 2011 .
- ^ "Introducción al almacenamiento web" . Red de desarrolladores de Microsoft . Consultado el 28 de junio de 2017 .
- ^ W3C: borrador de estándar de almacenamiento web . Dev.w3.org (5 de febrero de 2004). Consultado el 12 de junio de 2011.
enlaces externos
- Almacenamiento web HTML Living Standard 11
- W3C: almacenamiento web
- API de almacenamiento web en Mozilla Developer Network
- Opera: Web Storage: almacenamiento de datos del lado del cliente más sencillo y potente
- Almacenamiento local en BlackBerry DevZone