Las soluciones comunes de almacenamiento de datos frontal incluyen principalmente:Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storageetc., por ejemplo:
| característica | Galleta | localStorage | sessionStorage | indexedDB | | Ciclo de vida de los datos | Generalmente, generados por el servidor, el tiempo de caducidad puede establecerse; También se pueden generar componentes como la adopción de front-end y js-cookie | A menos que se limpie, siempre está ahí; Cuando el navegador está cerrado, también se guarda localmente, pero no se soporta la interfaz multinavegador | La limpieza y actualización de la página seguirá existiendo cuando la página esté cerrada, y no se soporta la interacción entre páginas | A menos que se limpie, siempre ha existido | | Tamaño del almacén de datos | 4K | 5M | 5M | Sin límite de tamaño | | Comunícate con el servidor | Se lleva en el encabezado solicitado cada vez, lo que afecta al rendimiento de la solicitud; Al mismo tiempo, al estar incluido en la solicitud, también es propenso a problemas de seguridad | No participando | No participando | No participando | | peculiaridad | Los pares clave-valor de cadenas almacenan datos localmente | Los pares clave-valor de cadenas almacenan datos localmente | Los pares clave-valor de cadenas almacenan datos localmente | IndexedDB es una base de datos no relacional (no se admiten operaciones mediante sentencias SQL). Puede almacenar grandes cantidades de datos, proporcionar interfaces para consultas y construir índices, algo que otras soluciones de almacenamiento no pueden proporcionar. |
IndexedDB
Este artículo describe principalmente el uso de IndexedDB para almacenamiento frontal, y se presenta de la siguiente manera:
IndexedDB es una API subyacente para almacenar grandes cantidades de datos estructurados (también objetos grandes de archivos/binarios (blobs)) en el lado del cliente. La API utiliza índices para permitir búsquedas de datos de alto rendimiento en los datos. Aunque el almacenamiento web es útil para almacenar pequeñas cantidades de datos, no es tan eficaz como almacenar grandes cantidades de datos estructurados. IndexedDB ofrece una solución para este escenario. Esta página es la guía principal de MDN IndexedDB; aquí ofrecemos una guía completa de referencia y uso de la API, detalles de soporte para navegadores y enlaces a algunas explicaciones de conceptos clave.
IndexedDB cuenta con las siguientes características:
(1) Almacenamiento de pares clave-valor. IndexedDB utiliza un almacén de objetos para almacenar datos. Todos los tipos de datos pueden depositarse directamente, incluidos los objetos JavaScript. En el repositorio de objetos, los datos se almacenan en forma de "pares clave-valor", y cada registro de datos tiene una clave primaria correspondiente, que es única y no puede duplicarse, de lo contrario se generará un error.
(2) Asincrónico. IndexedDB no bloquea el navegador y el usuario aún puede realizar otras operaciones, a diferencia de LocalStorage, que opera de forma síncrona. El diseño asincrónico es para evitar que se lean y escriban grandes cantidades de datos, ralentizando el rendimiento de las páginas web.
(3) Apoyar los asuntos. IndexedDB soporta transacciones, lo que significa que si uno de los pasos de la operación falla, toda la transacción se cancelará y la base de datos volverá al estado anterior a la transacción, y no hay caso de reescribir solo parte de los datos.
(4) Restricción de homología. IndexedDB está sujeto al mismo límite de origen, y cada base de datos corresponde al nombre de dominio que la creó. Las páginas web solo pueden acceder a bases de datos bajo sus propios nombres de dominio, no a bases de datos multidominio.
(5) Gran espacio de almacenamiento. IndexedDB tiene un espacio de almacenamiento mucho mayor que LocalStorage, generalmente no inferior a 250MB, y no hay límite superior.
(6) Soporte almacenamiento binario. IndexedDB puede almacenar no solo cadenas sino también datos binarios (objetos ArrayBuffer y objetos Blob).
Si es difícil empezar directamente con IndexedDB y necesitas encapsularlo tú mismo, puedes usar algunos paquetes empaquetados, como sigue:
- localForage: Un Polyfill sencillo que proporciona una sintaxis de valores sencilla para almacenes de datos del lado del cliente. Utiliza IndexedDB en segundo plano y recurre a WebSQL o localStorage en navegadores que no soportan IndexedDB.
- Dexie.js: Los envoltorios de IndexedDB permiten un desarrollo más rápido del código mediante una sintaxis sencilla.
- ZangoDB: Una interfaz IndexedDB similar a MongoDB, que soporta la mayoría de las funciones de filtrado, proyección, ordenación, actualización y agregación conocidas de MongoDB.
- JsStore: Un wrapper de IndexedDB con sintaxis SQL.
- MiniMongo: MongoDB en memoria cliente soportado por localstorage, sincronización del servidor vía http. MeteorJS usa MiniMongo.
- PouchDB: Un cliente que implementa CouchDB en el navegador usando IndexedDB.
- idb: Una biblioteca diminuta (〜1.15k) con la mayor parte de la API similar a IndexedDB, pero con algunas mejoras menores que mejoran mucho la usabilidad de la base de datos.
- idb-keyval: Almacenamiento por pares clave-valor basado en promesas súper simple y pequeño (~600B) implementado con IndexedDB.
- sifrr-storage: Una base de datos clave-valor muy pequeña (~2kB) basada en promesas del lado del cliente. Implementado basado en IndexedDB, localStorage, WebSQL y cookies. Puede seleccionar automáticamente las bases de datos soportadas mencionadas anteriormente y usarlas en orden de prioridad.
- lovefield: Lovefield es una base de datos relacional para aplicaciones web, escrita en JavaScript, puede ejecutarse en diferentes entornos de navegador y proporciona una API similar a SQL que es rápida, segura y fácil de usar.
Local Forage
localForage es un repositorio JavaScript rápido y sencillo. localForage mejora la experiencia offline de las aplicaciones web utilizando almacenamiento asíncrono (IndexedDB o WebSQL) y una API sencilla similar a localStorage. localForage utiliza localStorage en navegadores que no tienen soporte para IndexedDB o WebSQL.
Dirección de GitHub:El inicio de sesión del hipervínculo es visible.
Tutorial de chino:El inicio de sesión del hipervínculo es visible.
localForage proporciona dos archivos js diferentes, las diferencias son las siguientes:
localforage.js: una biblioteca Promise que contiene la implementación lie (El inicio de sesión del hipervínculo es visible.), el archivo es relativamente grande y la sintaxis de la promesa puede usarse en navegadores antiguos.
localforage.nopromises.js: No hay implementación de Promise, solo se admiten nuevas versiones de navegadores.
Código de prueba:
(Fin)
|
Publicado en 12/10/2023 20:42:27
|
|
|
|
Propietario|
Publicado en 2/3/2025 19:12:18
|
