IndexedDB es una API de bajo nivel que almacena una gran cantidad de datos estructurados (incluidos archivos/ blobs) para el almacenamiento del cliente. La API utiliza un índice para lograr una búsqueda de alto rendimiento de los datos.
Recientemente, existe una necesidad comercial que puede almacenar datos fuera de línea, y el formulario y las imágenes se pueden cargar cuando hay señales de red. Así que estudié el indexedDB de HTML5.
Para las necesidades de solo almacenamiento de ciertos campos, el almacenamiento local y el almacenamiento de sesión se pueden usar para completar. Pero una vez que se almacena una gran cantidad de datos, el almacenamiento local y el almacenamiento de la sesión están lejos de satisfacer las necesidades. En este momento, se reflejará la fuerza de IndexedDB.
1. Crear o abrir la base de datos/* Compatible con diferentes navegantes ' Versión) ;/ Nombre: Nombre de la base de datos, Versión: Número de versión de la base de datos
Debido a que IndexedDB es compatible en diferentes navegadores, necesitamos una parte de la función para ser compatible con IndexedDB.
2. La función de devolución de llamada conectada a la base de datos Request.AdDeventListener ('Success', function (Event) {// abrir o crear el éxito de la base de datos}, false); );Después de conectarse a la base de datos, la solicitud escuchará tres estados:
El estado actualizado es monitorear este estado cuando indexedDDB crea una nueva base de datos e indexedb.open (nombre, versión) versión (número de versión de base de datos). Cuando el número de versión no cambia, este estado no se activará. La creación y eliminación de la tienda de objetos de la base de datos se realizan en este evento de monitoreo.
3. Crear y eliminar ObjectstoreEn IndexedDB, ObjectStore es similar a la tabla de la base de datos.
Request.AdDeventListener ('Upgradeneeded', function (event) {// crea una instancia de base de datos const db = event.target.result; // apague la base de datos db.close (); // bkystorenames.contains (objectSorename);///// / Eliminar ObjectStore db.DeleteObjectStore (ObjectStoreName);}, falso);Puede usar el siguiente método para crear una escala de objetos
Request.AdDeventListener ('Upgradeneeded', function (event) {// crea una instancia de base de datos const db = event.target.result; // determinar si hay objectStore if (! Db.objectStoreNames. Contiene (ObjectStoreName) {Const store = DB .CreateObjectStore (ObjectStoreName, {keyyPath: keypath // keypath como palabras clave de búsqueda como objectStore}); El índice es único});}}, falso); 4. Adición de datos, eliminación, cambio de verificación Request.AdDeventListener ('Success', Function (Event) {// Crear una instancia de base de datos const db = event.target.result; // busca unastore objectore db.transaction (objectStoreName, wa); // wa es 'readwrite', Cuando los datos se pueden leer y escribir // Cuando los datos son 'Readonly', los datos solo leen el almacén constante = transacción.ObjectStore (ObjectStoreName);}, falso);Adición de base de datos, eliminación y cambio:
// Agregar datos. Correspondiente store.delete (valor) correspondiente a las palabras clave especificadas; ('Éxito', función (evento) {// la función de devolución de llamada}, falso);Encontrar datos de acuerdo con los índices
Const index = store.index (indexName); valor // data resultado.continue ();
Encontrar datos de acuerdo con el alcance del índice
const index = store.index (indexName); El objeto IDBKEyRange son los datos del rango especificado del rango especificado de la condición de acuerdo con las condiciones*/// más o más que o más que el rango = idbkeyRange.lowerBound (valor, true) // (valor, + ∞),> valueRange = idbkyRange. (Valor, isopen) // mayor o igual al valor1, menor o igual a value2IdbKeyRange.bound (valor1, valor2, isopen1, isopen2)
Finalmente, una biblioteca de indexeddb está encapsulada por mí mismo.
Lo anterior es el IndexedDB del almacenamiento local HTML5 introducido por Xiaobian. ¡Muchas gracias por su apoyo al sitio web de VEVB Wulin!