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){
// 对于取出的数据处理
}
四、 效果
数据库中的内容
展示效果
上一篇: 我姑姑在这呢
下一篇: 刷脸支付不需要介质是对扫码支付的再次革命