• 数据存储（二）WebStorage 之 IndexedDB

    参考：《JavaScript 高级程序设计》（第3版）

    扩展：

    数据存储（一）Cookie_不头秃的码农的博客-CSDN博客_cookie存数据

    数据存储（二）WebStorage 之 sessionStorage、globalStorage、localStorage_不头秃的码农的博客-CSDN博客

    Indexed Database API，简称为 IndexedDB，是在浏览器中保存结构化数据的一种数据库，支持保存、读取、查询、搜索等。

    替代了已被废弃的 Web SQL Database API。

    ================ 使用步骤 ================

    1. 建立与数据库的连接

    indexedDB 是一个数据库，使用对象保存数据（不是用表来保存）。一个 indexedDB 数据库，就是一组位于相同命名空间下的对象的集合。

    • 使用 window.indexedDB.open(dbName, version) 打开数据库。
    • 使用 db.close() 关闭数据库、断开数据库连接。db代表数据库实例对象。
    • 使用 window.indexedDB.deleteDatabase(dbName) 删除数据库。(只有在数据库断开连接的情况下才能删除)
    1. // 打开名为 JackDB 的数据库
    2. let request = indexedDB.open("JackDB", 1);
    3.  
    4. /**
    5.  * onupgradeneeded 当创建一个新的数据库或者增加已存在的数据库的版本号,onupgradeneeded 事件会被触发
    6.  * onupgradeneeded 是唯一可以修改数据库结构的地方
    7.  */
    8. request.onupgradeneeded = function (event) {
    9.   // todo something
    10. };
    11. request.onsuccess = function (event) {
    12.   // event.target 是 IDBRequest 实例，指向request对象
    13.   // event.target.result 指向数据库实例对象
    14.  
    15.   // todo something
    16. };
    17. request.onerror = function (event) {
    18.   console.log("数据库打开失败：", event.target.errorCode);
    19. };

    2. 创建对象存储空间

    因仅能在 onupgradeneeded 事件修改数据库结构，所以仅能在此事件里创建存储空间。

    创建对象存储空间时，需要指定一个唯一的键。

    • 可以通过 keyPath 指定主键，
    • 可以通过 autoIncrement: true 设置自增键
    1. request.onupgradeneeded = function (event) {
    2.   // event.target 是 IDBRequest 实例，指向 request 对象
    3.   db = event.target.result; // event.target.result 是数据库实例对象
    4.   let store;
    5.   if (!db.objectStoreNames.contains("users")) {
    6.     // 创建名为 users 的存储空间
    7.     // store = db.createObjectStore("users", { autoIncrement: true }); // autoIncrement 自增主键
    8.     store = db.createObjectStore("users", { keyPath: "name" }); // keyPath 主键字段名
    9.   }
    10. };

    3. 数据的基本CRUD

    3.1 新增数据

    1. /**
    2.  * 写入数据
    3.  * @param {IDBDatabase} db 数据库实例
    4.  * @param {String | Array} dbName 数据库名
    5.  * @param {String} storeName objectStore名
    6.  * @param {*} data 待新增的数据
    7.  */
    8. function add(db, dbName, storeName, data) {
    9.   let request = db
    10.     .transaction(dbName, "readwrite") // 新建事务
    11.     .objectStore(storeName) // 拿到 IDBObjectStore 对象
    12.     .add(data);
    13.   request.onsuccess = (event) => {
    14.     console.log('写入数据成功',event.target.result)
    15.   };
    16.   request.onerror = (event) => {
    17.     console.log('写入数据失败', event.target.error);
    18.   };
    19.   request.onabort = (event) => {
    20.    console.log('事务回滚', event.target);
    21.   };
    22. }

    3.2 修改数据

    1. /**
    2.  * 根据主键修改数据（若无此主键，则新增数据）
    3.  * @param {IDBDatabase} db 数据库实例
    4.  * @param {String | Array} dbName 数据库名
    5.  * @param {String} storeName objectStore名
    6.  * @param {*} key 主键
    7.  */
    8. function update(db, dbName, storeName, data) {
    9.   let request = db
    10.     .transaction(dbName, "readwrite") // 新建事务
    11.     .objectStore(storeName) // 拿到 IDBObjectStore 对象
    12.     .put(data);
    13.   request.onsuccess = (event) => {
    14.     console.log('修改数据成功',event.target.result)
    15.   };
    16.   request.onerror = (event) => {
    17.     console.log('修改数据失败', event.target.error);
    18.   };
    19.   request.onabort = (event) => {
    20.    console.log('事务回滚', event.target);
    21.   };
    22. }

    3.3 查询数据

    1. /**
    2.  * 根据主键读取数据
    3.  * @param {IDBDatabase} db 数据库实例
    4.  * @param {String | Array} dbName 数据库名
    5.  * @param {String} storeName objectStore名
    6.  * @param {*} key 主键
    7.  */
    8. function read(db, dbName, storeName, key) {
    9.   let request = db
    10.     .transaction(dbName, "readwrite") // 新建事务
    11.     .objectStore(storeName) // 拿到 IDBObjectStore 对象
    12.     .get(key);
    13.   request.onsuccess = (event) => {
    14.     console.log('读取数据成功',event.target.result)
    15.   };
    16.   request.onerror = (event) => {
    17.     console.log('读取数据失败', event.target.error);
    18.   };
    19.   request.onabort = (event) => {
    20.    console.log('事务回滚', event.target);
    21.   };
    22. }

    3.4 删除数据

    1. /**
    2.  * 根据主键删除数据
    3.  * @param {IDBDatabase} db 数据库实例
    4.  * @param {String | Array} dbName 数据库名
    5.  * @param {String} storeName objectStore名
    6.  * @param {*} key 主键
    7.  */
    8.  function remove(db, dbName, storeName, key) {
    9.   let request = db
    10.     .transaction(dbName, "readwrite") // 新建事务
    11.     .objectStore(storeName) // 拿到 IDBObjectStore 对象
    12.     .delete(key);
    13.   request.onsuccess = (event) => {
    14.     console.log("删除数据成功", event.target.result);
    15.   };
    16.   request.onerror = (event) => {
    17.     console.log("删除数据失败", event.target.error);
    18.   };
    19.   request.onabort = (event) => {
    20.     console.log("事务回滚", event.target);
    21.   };
    22. }

    3.5 清空数据

    1. /**
    2.  * 清空所有数据
    3.  * @param {IDBDatabase} db 数据库实例
    4.  * @param {String | Array} dbName 数据库名
    5.  * @param {String} storeName objectStore名
    6.  */
    7.  function read(db, dbName, storeName) {
    8.   let request = db
    9.     .transaction(dbName, "readwrite") // 新建事务
    10.     .objectStore(storeName) // 拿到 IDBObjectStore 对象
    11.     .clear();
    12.   request.onsuccess = (event) => {
    13.     console.log("清空数据成功", event.target.result);
    14.   };
    15.   request.onerror = (event) => {
    16.     console.log("清空数据失败", event.target.error);
    17.   };
    18.   request.onabort = (event) => {
    19.     console.log("事务回滚", event.target);
    20.   };
    21. }

    4. 游标

    1. /**
    2.  * cursor 游标
    3.  * @desc 指向结果集的指针
    4.  * 游标工作原理：游标指针先指向结果中的第一项，在接到查找下一项的命令时，才会指向下一项。（不提前收集结果）
    5.  * 创建游标：在存储空间上调用openCursor(range, direction)
    6.  * @param {IDBKeyRound} range 键范围，默认范围为全部
    7.  * @param {String} direction 方向
    8.  *   next 下一个（默认）
    9.  *   nextunique 下一个不重复项
    10.  *   prev 前一项
    11.  *   prevunique 前一个不重复项
    12.  * @return 会返回一个请求对象，可以指定onsuccess()/onerror()事件处理程序。
    13.  *   onsuccess()可以通过event.target.result取得结果中的下一项。
    14.  *     有下一项时：event.target.result 是 IDBCursorWithValue的实例
    15.  *     无下一项时：event.target.result 是 null
    16.  * 游标查找下一项指令：continue(key), advance(count)
    17.  *   continue(key) 移动到结果集中的下一项。参数key（主键）可选。
    18.  *     不指定key,游标移动到下一项；
    19.  *     指定key，游标移动到指定键。
    20.  *   advance(count) 向前移动count指定项数。
    21.  */

     游标的使用示例，放在最后辣 ~

    5. 键范围 

    1. /**
    2.  * keyRange 键范围
    3.  * @desc 利用游标查找数据太局限，键范围可灵活的查找数据（实例：IDBKeyRange）
    4.  * @兼容 var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
    5.  * @func 四种定义键的方式，最后一种功能包含前三种
    6.  *   1. only(key) // 只取得键为key的对象，类似于objectStore().get(key)
    7.  *   2. lowerBound(startKey, isStartNext) // 指定游标开始的位置，默认isStartNext为false
    8.  *        isStartNext = false  =>  从startKey开始一直查找到最后
    9.  *        isStartNext = true  =>  从startKey的下一个对象开始一直查找到最后
    10.  *   3. upperBound(endKey, isEndNext) // 指定游标结束的位置，默认isEndNext=false
    11.  *        isEndNext = false  => 从头查找到endKey的位置
    12.  *        isEndNext = true  =>  从头查找到endKey的前一个对象为止
    13.  *   4. bound(startKey, endKey, isStartNext, isEndNext) // 指定游标开始和结束的位置，默认isStartNext=false, isEndNext=false
    14.  *        isStartNext = false  => 从startKey开始查找
    15.  *        isStartNext = true  => 从startKey的下一个对象开始查找
    16.  *        isEndNext = false  => 到endKey结束
    17.  *        isEndNext = true  => 到endKey的上一个对象结束
    18.  */

      键范围的使用示例，放在最后辣 ~

    6. 索引

    1. /**
    2.  * 索引
    3.  * @desc 类似对象存储空间。（为一个存储对象空间，指定多个键）
    4.  * @意义 为提高查询速度而基于特定属性创建的。
    5.  * 例如：通过用户id和用户名两种方式存储数据，就需要通过这两个键来存储记录。用户id作为主键，在为用户名创建索引。
    6.  *
    7.  * @func 创建索引 creatIndex(indexName, indexAttrName, options)
    8.  * @param indexName 索引名
    9.  * @param indexAttrName 索引属性名
    10.  * @param options 包含unique的配置项
    11.  * @return 返回IDBIndex实例
    12.  *
    13.  * @func 获取某个索引 index(indexName)
    14.  * @param indexName 索引名
    15.  * 在索引上，调用 openCursor() 来创建游标。
    16.  *   此时，event.target.result.key 存储的是索引键；
    17.  *        event.target.result.primaryKey 存储的是主键；
    18.  *        event.target.result.value 存储的是整个对象。
    19.  * 在索引上，调用 openKeyCursor() 来创建一个特殊的，只返回每条记录主键的游标。
    20.  *   此时，event.target.result.key 存储的是索引键;
    21.  *        event.target.result.primaryKey 存储的是主键；
    22.  *        无 event.target.result.value。
    23.  * 在索引上，调用 get(indexKey) 来获取整个对象。
    24.  *   此时，event.target.result 即是这个对象。
    25.  * 在索引上，调用 getKey(indexKey) 来通过索引键获取主键。
    26.  *   此时，event.target.result 即是这个主键。
    27.  *
    28.  * @func 获取某个存储空间下的所有索引 indexNames属性
    29.  * @return 返回 DOMStringList 实例，即包含某个存储空间下所有索引名的对象
    30.  *
    31.  * @func 删除某个索引 deleteIndex(indexName)
    32.  * @return 无任何返回，因为删除索引不影响存储空间，所以无任何返回。
    33.  */

     索引的使用示例，放在最后辣 ~

    7. 并发问题

    1. /**
    2.  * 并发问题
    3.  * @desc IndexedDB提供的API是异步的，但是仍然存储并发问题。
    4.  * @eg 例如：浏览器两个不同的标签打开同一页面，那么一个页面试图更新另一个页面尚未准备就绪的数据库，有可能引起并发问题
    5.  * @eg 例如：把数据库设置为新版，也有可能引发并发问题（只有当浏览器仅有一个标签页打开使用数据库时，调用setVersion()才能完成）
    6.  *     解决法一：每次成功打开数据库，都指定onversionchange事件处理程序。
    7.  *             当同一个来源的另一个内标签页调用setVersion()时，会执行这个函数，在函数内部立即关掉数据库即可。
    8.  *             关闭数据路方法：db.close()
    9.  *     解决法二：调用setVersion()时，指定请求的onblocked()事件处理程序。
    10.  *             当你想要更新数据库版本但另一个标签页已经打开数据库的情况下，就会触发这个事件。
    11.  *             此时可通知用户关闭其他标签页，再重新调用setVersion()。
    12.  */

    8. 限制

    1. /**
    2.  * 限制
    3.  * @desc 与Web Storage类似。
    4.  * @限制1 IndexedDB只能由同源页面操作，不能跨域共享信息。
    5.  * @限制2 每个数据库占用磁盘空间有限。
    6.  *         FireFox 4+ 的上限是每个源 50M，其他几乎都是5M
    7.  * @限制3 FireFox 不允许本地文件访问IndexedDB，Chrome无限制。
    8.  */

    9. 封装操作数据库的工具类

    1. /**
    2.  * IndexedDB数据库操作方法类
    3.  */
    4. class IDBUtils {
    5.   constructor(db, dbName, store) {
    6.     this.db = db; // {IDBDatabase} 已被打开的数据库
    7.     this.dbName = dbName; // {String | Array} 存储空间名
    8.     this.store = store; // {String} 存储空间名
    9.     this.type = {
    10.       success: "SUCCESS", // 操作成功
    11.       error: "ERROR", // 操作失败
    12.       done: "DONE", // 检索结束
    13.       abort: "ABORT", // 操作回滚
    14.     };
    15.   }
    16.  
    17.   /**
    18.    * 新增数据
    19.    * @param {*} data 要写入的数据
    20.    * @param {Function} cb 回调函数
    21.    */
    22.   add(data, cb) {
    23.     let request = this.db
    24.       .transaction(this.dbName, "readwrite") // 新建事务
    25.       .objectStore(this.store) // 拿到 IDBObjectStore 对象
    26.       .add(data);
    27.     request.onsuccess = (event) => {
    28.       if (cb) cb(this.type.success, event.target.result);
    29.     };
    30.     request.onerror = (event) => {
    31.       if (cb) cb(this.type.error, event.target.error);
    32.     };
    33.     request.onabort = (event) => {
    34.       if (cb) cb(this.type.abort, event.target);
    35.     };
    36.   }
    37.  
    38.   /**
    39.    * 根据主键，读取数据
    40.    * @param {String | Number} key 主键
    41.    * @param {Function} cb 回调函数
    42.    */
    43.   read(key, cb) {
    44.     let request = this.db
    45.       .transaction(this.dbName, "readonly") // 新建事务
    46.       .objectStore(this.store)
    47.       .get(key);
    48.     request.onsuccess = (event) => {
    49.       if (cb) cb(this.type.success, event.target.result);
    50.     };
    51.     request.onerror = (event) => {
    52.       if (cb) cb(this.type.error, event.target.error);
    53.     };
    54.     request.onabort = (event) => {
    55.       if (cb) cb(this.type.abort, event.target);
    56.     };
    57.   }
    58.  
    59.   /**
    60.    * 根据主键要么更新，要么插入
    61.    * @param {*} param 一条完整的信息
    62.    * @param {Function} cb 回调函数
    63.    */
    64.   update(param, cb) {
    65.     let request = this.db
    66.       .transaction(this.dbName, "readwrite")
    67.       .objectStore(this.store)
    68.       .put(param);
    69.     request.onsuccess = (event) => {
    70.       if (cb) cb(this.type.success, event.target.result);
    71.     };
    72.     request.onerror = (event) => {
    73.       if (cb) cb(this.type.error, event.target.error);
    74.     };
    75.     request.onabort = (event) => {
    76.       if (cb) cb(this.type.abort, event.target);
    77.     };
    78.   }
    79.  
    80.   /**
    81.    * 删除数据
    82.    * @param {key} key 主键
    83.    * @param {Function} cb 回调函数
    84.    */
    85.   remove(key, cb) {
    86.     let request = this.db
    87.       .transaction(this.dbName, "readwrite")
    88.       .objectStore(this.store)
    89.       .delete(key);
    90.     request.onsuccess = () => {
    91.       if (cb) cb(this.type.success);
    92.     };
    93.     request.onerror = () => {
    94.       if (cb) cb(this.type.error);
    95.     };
    96.     request.onabort = (event) => {
    97.       if (cb) cb(this.type.abort, event.target);
    98.     };
    99.   }
    100.  
    101.   /**
    102.    * 清空数据
    103.    * @param {Function} cb 回调函数
    104.    */
    105.   clear(cb) {
    106.     let request = this.db
    107.       .transaction(this.dbName, "readwrite")
    108.       .objectStore(this.store)
    109.       .clear();
    110.     request.onsuccess = () => {
    111.       if (cb) cb(this.type.success);
    112.     };
    113.     request.onerror = (event) => {
    114.       if (cb) cb(this.type.error, event.target);
    115.     };
    116.     request.onabort = (event) => {
    117.       if (cb) cb(this.type.abort, event.target);
    118.     };
    119.   }
    120.  
    121.   /**
    122.    * 关闭数据库
    123.    */
    124.   closeDB() {
    125.     this.db.close();
    126.   }
    127.  
    128.   /**
    129.    * 删除数据库
    130.    * @条件 在数据库没被打开的情况下，可以删除
    131.    */
    132.   deleteDB() {
    133.     this.db.close();
    134.  
    135.     let request = window.indexedDB.deleteDatabase(this.dbName);
    136.     request.onsuccess = (event) => {
    137.       console.log("success", event);
    138.     };
    139.     request.onerror = (event) => {
    140.       console.log("error", event);
    141.     };
    142.   }
    143.  
    144.   // =================================================================
    145.   // ============================== 游标 ==============================
    146.   // =================================================================
    147.  
    148.   /**
    149.    * 读取全部（游标）
    150.    * @param {Function} cb 回调函数
    151.    */
    152.   readAll(direction, cb) {
    153.     let request = this.db
    154.       .transaction(this.dbName)
    155.       .objectStore(this.store)
    156.       .openCursor(null, direction);
    157.     let res = [];
    158.     request.onsuccess = (event) => {
    159.       let cursor = event.target.result; // 也可以在索引上打开 objectStore.index("id").openCursor()
    160.       // cursor 有值，代表有下一项; cursor = null，代表没有下一项
    161.       if (cursor) {
    162.         res.push({ key: cursor.key, value: cursor.value });
    163.         cursor.continue(); // 继续查找下一项
    164.       } else {
    165.         if (cb) cb(this.type.success, res);
    166.       }
    167.     };
    168.     request.onerror = (event) => {
    169.       if (cb) cb(this.type.error, event.target);
    170.     };
    171.   }
    172.  
    173.   /**
    174.    * 利用游标更新 cursor.update()
    175.    * @param {*} key 主键
    176.    * @param {*} data 待更新数据
    177.    * @param {Function} cb 回调函数
    178.    */
    179.   cursorUpdate(key, data, cb) {
    180.     let request = this.db
    181.       .transaction(this.dbName)
    182.       .objectStore(this.store)
    183.       .openCursor();
    184.     request.onsuccess = (event) => {
    185.       let cursor = event.target.result;
    186.       if (cursor) {
    187.         if (cursor.key === key) {
    188.           let updateRequest = cursor.update(data);
    189.           updateRequest.onsuccess = (event) => {
    190.             if (cb) cb(this.type.success, event.target);
    191.           };
    192.           updateRequest.onerror = (event) => {
    193.             if (cb) cb(this.type.error, event.target);
    194.           };
    195.         } else {
    196.           cursor.continue(); // 继续查找下一项
    197.         }
    198.       } else {
    199.         if (cb) cb(this.type.done); // 检索结束
    200.       }
    201.     };
    202.     request.onerror = (event) => {
    203.       if (cb) cb(this.type.error, event.target);
    204.     };
    205.   }
    206.  
    207.   /**
    208.    * 利用游标删除 cursor.delete()
    209.    * @param {*} key 主键
    210.    * @param {Function} cb 回调函数
    211.    */
    212.   cursorDelete(key, cb) {
    213.     let request = this.db
    214.       .transaction(this.dbName)
    215.       .objectStore(this.store)
    216.       .openCursor();
    217.     request.onsuccess = (event) => {
    218.       let cursor = event.target.result;
    219.       if (cursor) {
    220.         if (cursor.key === key) {
    221.           let deleteRequest = cursor.delete();
    222.           deleteRequest.onsuccess = () => {
    223.             if (cb) cb(this.type.success);
    224.           };
    225.           deleteRequest.onerror = (event) => {
    226.             if (cb) cb(this.type.error, event.target);
    227.           };
    228.         } else {
    229.           cursor.continue(); // 继续查找下一项
    230.         }
    231.       } else {
    232.         if (cb) cb(this.type.done); // 检索结束
    233.       }
    234.     };
    235.     request.onerror = (event) => {
    236.       if (cb) cb(this.type.error, event.target);
    237.     };
    238.   }
    239.  
    240.   // ==================================================================
    241.   // ============================== 键范围 =============================
    242.   // ==================================================================
    243.   IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;
    244.   searchOnly(key, cb) {
    245.     let range = IDBKeyRange.only(key);
    246.     let request = this.db
    247.       .transaction(this.dbName)
    248.       .objectStore(this.store)
    249.       .openCursor(range);
    250.     request.onsuccess = (event) => {
    251.       let cursor = event.target.result;
    252.       if (cursor) {
    253.         if (cb) cb({ key: cursor.key, value: cursor.value });
    254.       } else {
    255.         if (cb) cb(this.type.done);
    256.       }
    257.     };
    258.     request.onerror = (event) => {
    259.       if (cb) cb(this.type.error, event.target.error);
    260.     };
    261.   }
    262.   searchLowerBound(key, isNext = false, cb) {
    263.     let range = IDBKeyRange.lowerBound(key, isNext);
    264.     let request = this.db
    265.       .transaction(this.dbName)
    266.       .objectStore(this.store)
    267.       .openCursor(range, "prev");
    268.     let res = [];
    269.     request.onsuccess = (event) => {
    270.       let cursor = event.target.result;
    271.       if (cursor) {
    272.         res.push({ key: cursor.key, value: cursor.value });
    273.         cursor.continue(); // 继续查找下一项
    274.       } else {
    275.         if (cb) cb(this.type.success, res);
    276.       }
    277.     };
    278.     request.onerror = (event) => {
    279.       if (cb) cb(this.type.error, event.target.error);
    280.     };
    281.   }
    282.   searchUpperBound(key, isPre = false, cb) {
    283.     let range = IDBKeyRange.upperBound(key, isPre);
    284.     let request = this.db
    285.       .transaction(this.dbName)
    286.       .objectStore(this.store)
    287.       .openCursor(range);
    288.     let res = [];
    289.     request.onsuccess = (event) => {
    290.       let cursor = event.target.result;
    291.       if (cursor) {
    292.         res.push({ key: cursor.key, value: cursor.value });
    293.         cursor.continue(); // 继续查找下一项
    294.       } else {
    295.         if (cb) cb(this.type.success, res);
    296.       }
    297.     };
    298.     request.onerror = (event) => {
    299.       if (cb) cb(this.type.error, event.target.error);
    300.     };
    301.   }
    302.   searchBound(startKey, endKey, isNext = false, isPre = false, cb) {
    303.     let range = IDBKeyRange.bound(startKey, endKey, isNext, isPre);
    304.     let request = this.db
    305.       .transaction(this.dbName)
    306.       .objectStore(this.store)
    307.       .openCursor(range);
    308.     let res = [];
    309.     request.onsuccess = (event) => {
    310.       let cursor = event.target.result;
    311.       if (cursor) {
    312.         res.push({ key: cursor.key, value: cursor.value });
    313.         cursor.continue(); // 继续查找下一项
    314.       } else {
    315.         if (cb) cb(this.type.success, res);
    316.       }
    317.     };
    318.     request.onerror = (event) => {
    319.       if (cb) cb(this.type.error, event.target.error);
    320.     };
    321.   }
    322.  
    323.   // =================================================================
    324.   // ============================== 索引 ==============================
    325.   // =================================================================
    326.   /**
    327.    * 获取存储空间对象上的索引
    328.    */
    329.   getIndexNames() {
    330.     let indexNameList = this.db
    331.       .transaction(this.dbName, "readwrite") // 新建事务
    332.       .objectStore(this.store).indexNames; // 拿到 IDBObjectStore 对象
    333.     console.log("indexNameList", indexNameList);
    334.   }
    335.   /**
    336.    * 通过索引键使用游标
    337.    * @param {*} indexName 
    338.    */
    339.   getIndexCursor(indexName) {
    340.     let index = this.db
    341.       .transaction(this.dbName, "readwrite") // 新建事务
    342.       .objectStore(this.store) // 拿到 IDBObjectStore 对象
    343.       .index(indexName);
    344.     let request = index.openCursor();
    345.     request.onsuccess = (event) => {
    346.       console.log("event", event.target.result);
    347.       // 进行游标的使用、continue等逻辑
    348.     };
    349.   }
    350.  
    351.   /**
    352.    * 通过索引键获取主键游标
    353.    * @param {*} indexName 
    354.    */
    355.   getIndexKeyCursor(indexName) {
    356.     let index = this.db
    357.       .transaction(this.dbName, "readwrite") // 新建事务
    358.       .objectStore(this.store) // 拿到 IDBObjectStore 对象
    359.       .index(indexName);
    360.     let request = index.openKeyCursor();
    361.     request.onsuccess = (event) => {
    362.       console.log("event", event.target.result);
    363.       // 进行游标的使用、continue等逻辑
    364.     };
    365.   }
    366.  
    367.   /**
    368.    * 通过索引键获取数据
    369.    * @param {*} indexName 
    370.    * @param {*} indexKey 
    371.    */
    372.   formIndexGet(indexName, indexKey) {
    373.     let index = this.db
    374.       .transaction(this.dbName, "readwrite") // 新建事务
    375.       .objectStore(this.store) // 拿到 IDBObjectStore 对象
    376.       .index(indexName);
    377.     let request = index.get(indexKey);
    378.     request.onsuccess = (event) => {
    379.       console.log("event", event.target.result);
    380.     };
    381.   }
    382.  
    383.   /**
    384.    * 通过索引键获取主键
    385.    * @param {*} indexName 
    386.    * @param {*} indexKey 
    387.    */
    388.   fromIndexGetKey(indexName, indexKey) {
    389.     let index = this.db
    390.       .transaction(this.dbName, "readwrite") // 新建事务
    391.       .objectStore(this.store) // 拿到 IDBObjectStore 对象
    392.       .index(indexName);
    393.     let request = index.getKey(indexKey);
    394.     request.onsuccess = (event) => {
    395.       console.log("event", event.target.result);
    396.     };
    397.   }
    398. }

    索引、游标、键范围的基本使用如上，当然还可以利用 索引+游标+键范围来查询数据，大家有需要可以自己封装

  • 相关阅读:
    java计算机毕业设计高校宿舍管理系统演示视频2021源码+mysql数据库+系统+lw文档+部署
    Python3中用户注册小案例 - 解决中文字符问题 (代码)
    2022-08-10 学习日记（30th day）注解
    计算机网络第1章 (概述)
    Mybatis中表之间的关联关系
    解释pom中的依赖dependency
    【算法小记】深度学习——时间序列数据分析 Time series Data Analysis
    cnpm install时，报错TypeError: randomUUID is not a function无法初始化
    【李沐深度学习笔记】矩阵计算（2）
    如何设置Linux的语言环境
  • 原文地址：https://blog.csdn.net/weixin_44137575/article/details/128024783