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

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){
    // 对于取出的数据处理
}

四、 效果

数据库中的内容

在这里插入图片描述

展示效果

在这里插入图片描述

展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客
应支付0元
点击重新获取
扫码支付

支付成功即可阅读