IndexedDB 倒序 查询的时候，如何将最新数据放在最前面

IndexedDB 倒序 查询的时候，如何将最新数据放在最前面

以下简称 ​​IndexDB​​​ 为 ​​DB​​

前言

最近在做一个单页应用，用到了 ​​IndexedDB​​​，不过需要最新的数据展示在最前，看了下 API 找到了方法。
当然也可以把所有数据查出来再进行排序操作，但这样并不够完美，不是最优解，还是直接查出的时候就是倒序的比较好。

线上例子： https://kylebing.cn/tools/typepad/

一、 定义并记录存储数据的主键

具体的 ​​IndexedDB​​​ 的使用方法不再冗述，说说的记录数据的方式。
在 ​​​LocalStorage​​​ 中定义一个变量，用于记录当前的 ​​IndexDB​​​ 数据指针： ​​indexedDBIndex​​​ 在 DB 中插入数据的时候，以 ​​indexedDBIndex​​ 这个值为主键，第添加成功一条数据就增1
所以，这样能知道数据库的最高主键值是多少。

二、 普通遍历 DB 数据

以下是普通正序遍历数据的样子

let OBJECT_NAME = '存储的对象名';
let objectStore = DB.transaction([OBJECT_NAME], 'readwrite').objectStore(OBJECT_NAME);
let currentCursor = objectStore.openCursor().onsuccess = e => {
  let cursor = e.target.result;
  if (cursor) {
    solve(cursor);
    cursor.continue(); // 移到下一个位置
  }
}
  
function solve(cursor){
    // 对于取出的数据处理
}

三、 倒序遍历 DB 数据

这里我们需要了解一下关于 ​​ObjectStore​​​ 的 ​​.openCursor​​​ 方法中可以传递的参数有哪些。
有两个：
第一个是你所有查询的数据范围，一个 ​​​IDBKeyRange​​​ 对象；
第二个是查询的方向，默认是 ​​​next​​。

这里就用到了我们之前在 ​​localStorage​​ 中记录的最后的主键值。

关于如何新建一个需要的 IDBKeyRange 对象，看 MDN 文档：
​​​https://developer.mozilla.org/en-US/docs/Web/API/IDBKeyRange​​

之后在 .openCursor 的时候改第二个参数为 ​​'prev'​​​，意思就是：获取小于 ​​upperBound​​ 的数据，从最后一个向前获取

let OBJECT_NAME = '存储的对象名';
let upperBound = localStorage[indexedDBIndex]; // 取出主键值
let objectStore = DB.transaction([OBJECT_NAME], 'readwrite').objectStore(OBJECT_NAME);
let currentCursor = objectStore.openCursor(IDBKeyRange.upperBound(upperBound, true), "prev").onsuccess = e => {
  let cursor = e.target.result;
  if (cursor) {
    solve(cursor);
    cursor.continue(); // 移到下一个位置
  }
}
  
function solve(cursor){
    // 对于取出的数据处理
}

四、 效果

数据库中的内容

展示效果