笔记大全

H5的本地存储之IndexedDB

更新时间：2023-10-10

什么是IndexedDB

IndexedDB是在Web浏览器中提供的一种NoSQL类型的存储机制。这种存储方式以键值对为基本单位进行数据的存储，同时也允许对这些键值对进行索引，以便使用不同的方式来检索数据。


    // 打开或者创建一个IndexedDB数据库
    let indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
    let request = indexedDB.open('myDatabase', 1);
    
    // 打开成功后的回调函数
    request.onupgradeneeded = function(event) {
      let db = event.target.result;
      let objectStore = db.createObjectStore('customers', { keyPath: 'id'});
      objectStore.createIndex('name', 'name', { unique: false });
      objectStore.createIndex('email', 'email', { unique: true });
    };

IndexedDB数据的基本操作

IndexedDB的数据的基本操作包括添加数据、读取数据、修改数据和删除数据。可以通过使用IndexedDB API方法来实现这些操作。


    //添加数据的方法
    let transaction = db.transaction(['customers'], 'readwrite');
    let objectStore = transaction.objectStore('customers');
    let request = objectStore.add({ id: '1', name: 'John Doe', email: 'johndoe@gmail.com' });
    
    //读取数据的方法
    let transaction = db.transaction(['customers'], 'readonly');
    let objectStore = transaction.objectStore('customers');
    let request = objectStore.get('1');
    request.onsuccess = function(event) {
      console.log(request.result);
    };
    
    //修改数据的方法
    let transaction = db.transaction(['customers'], 'readwrite');
    let objectStore = transaction.objectStore('customers');
    let request = objectStore.put({ id: '1', name: 'John Doe', email: 'johndoe@yahoo.com' });
    
    //删除数据的方法
    let transaction = db.transaction(['customers'], 'readwrite');
    let objectStore = transaction.objectStore('customers');
    let request = objectStore.delete('1');

IndexedDB的查询和索引

IndexedDB的查询和索引功能非常强大。可以根据一个或多个索引来检索存储在IndexedDB中的键值对，并可以使用复杂的查询条件进行过滤。


    //使用索引查询数据的方法
    let transaction = db.transaction(['customers'], 'readonly');
    let objectStore = transaction.objectStore('customers');
    let index = objectStore.index('email');
    let request = index.get('johndoe@gmail.com');
    request.onsuccess = function(event) {
      console.log(request.result);
    };
    
    //使用复杂查询条件查询数据的方法
    let transaction = db.transaction(['customers'], 'readonly');
    let objectStore = transaction.objectStore('customers');
    let range = IDBKeyRange.bound('alpha', 'beta');
    let index = objectStore.index('name');
    let request = index.openCursor(range);
    request.onsuccess = function(event) {
      let cursor = event.target.result;
      if (cursor) {
          console.log(cursor.value);
          cursor.continue();
      }
    };

IndexedDB的优点和缺点

IndexedDB是一个非常强大的浏览器存储机制，可以用于离线数据存储、本地缓存等应用场景。它的主要优点包括：

支持离线数据存储和本地缓存
支持大型数据集的存储和检索
支持多个键值对索引的创建和使用
支持查询条件的复杂过滤和检索

但是，IndexedDB也有一些缺点和不足之处，例如：

使用比其他存储机制更加复杂
不支持所有的浏览器版本和操作系统
不支持跨tab和跨domain的会话
没有原生的数据类型

c语言编程笔录