欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-16 08:16:44
...

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

以下简称 IndexDBDB

前言

最近在做一个单页应用,用到了 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){
    // 对于取出的数据处理
}

四、 效果

数据库中的内容

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

展示效果

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