简单介绍下localForage。localForage 是一个 JavaScript 库,通过简单类似 localStorage API 的异步存储来改进你的 Web 应用程序的离线体验。它能存储多种类型的数据,而不仅仅是字符串。 内部有一个优雅降级策略。

默认情况下,localForage 按照以下顺序选择数据仓库的后端驱动:

IndexedDB

WebSQL

localStorage

扯远了。那么言归正传。localForage这个库可以说功能很强大也很齐全了。但是对于indexedDB这个数据仓库。localForage却没有支持给表加索引,通过索引查询数据的支持。可是我就想用怎么办。

方案一:有个基于localForage的库叫localforage-indexes,这个库可以给表加索引。但是!!!!

简单来说,会冲突,而且createIndex的时候,如果已经创建会报错。程序无法正常运行了。那么其实

这就是它为什么github只有1星的原因了。完全没法用是不是。

我的解决方案是。原生创建indexedDB索引+localForage。

show code 首先是用原生初始化给需要的表加上索引

// 春风得意马蹄疾,一日看尽长安花。
// 〔唐〕孟郊《登科后》
//代码作者:xbw
let dbVersion = 1.0,
store = "project"
//创建个对象,到时候创建索引直接循环一起创建了。
let projectIndexObj = {}
projectIndexObj["stroeNmae1"] = [{
indexName: "id",
unique: false
}];
projectIndexObj["stroeNmae2"] = [{
indexName: "id",
unique: false
}];
projectIndexObj["stroeNmae3"] = [{
indexName: "name",
unique: false
}]; var openRequest = indexedDB.open(store, dbVersion); openRequest.onupgradeneeded = function (e) {
let db = e.target.result;
for (let key in projectIndexObj) {
if (!db.objectStoreNames.contains(key)) {
var store = db.createObjectStore(key);
//创建索引
projectIndexObj[key].forEach(item => {
store.createIndex("ix_" + item.indexName, item.indexName, {
unique: item.unique
});
})
}
}
//创建完毕后,把db关掉,不然后面用localForage会出问题。
db.close();
};

到这步,初始化的索引我们就加完了,也不会影响localForage的使用。现在就是取数据了。

封装一个通过索引取值的方法就可以了。

顺便给大家推荐一个个人觉得比较好用的接口管理工具,apipost,可以完美替代postman。

localforage indexedDB如何使用索引的更多相关文章

  1. HTML5本地存储——IndexedDB二:索引

    HTML5本地存储——IndexedDB(二:索引)   在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexed ...

  2. HTML5本地存储——IndexedDB(二:索引)

    在HTML5本地存储——IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器——索引. 熟悉数据库的同学都知道索引的一个好处 ...

  3. IndexedDB(二:索引)

    在HTML5本地存储--IndexedDB(一:基本使用)中介绍了关于IndexedDB的基本使用方法,很不过瘾,这篇我们来看看indexedDB的杀器--索引. 熟悉数据库的同学都知道索引的一个好处 ...

  4. 突破本地离线存储的JS库 localforage

    localforage 简介 项目地址 https://github.com/localForage/localForage API中文地址 https://localforage.docschina ...

  5. 客户端持久化解决方案:indexedDB

    客户端持久化解决方案:indexedDB indexedDB适合大量的结构化的数据存储:打开数据库和获取数据对象都是异步的: 需要开启事务,访问的objectStore都要是在开启的事务中. 数据库结 ...

  6. HTML5本地存储——IndexedDB

    在HTML5本地存储——Web SQL Database提到过Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了 Web Storage(Local Stora ...

  7. html5本地数据库(一)

    本地数据库 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !important ...

  8. 【译】客户端存储(Client-Side Storage)

    本文转载自:众成翻译译者:文蔺链接:http://www.zcfy.cc/article/660原文:http://www.html5rocks.com/en/tutorials/offline/st ...

  9. localforage 对不同浏览器 使用不同的缓存策略 , 大大提高了性能 ,IndexedDB,WebSQL 和 localStorage 三种存储模式

    支持回调的异步 API: 支持 IndexedDB,WebSQL 和 localStorage 三种存储模式(自动为你加载最佳的驱动程序): 支持 BLOB 和任意类型的数据,让您可以存储图片,文件等 ...

随机推荐

  1. [OpenCV]获取摄像头视频

    环境:Windows 8 64bit + VS2012 X64 + OpenCV 2.4.7 摄像头的捕捉使用VideoCapture类 Class VideoCapture    [OpenCV文档 ...

  2. Codeforces Round #676 (Div. 2) XORwice、Putting Bricks in the Wall、Palindromifier

    题目链接:XORwice 题意:给你两个数a.b.求一个数x,使得((a异或x)+(b异或x))这个值最小,输出最小那个x 题解: 输出(a|b)-(a&b)就行(猜了一手 代码: #incl ...

  3. Best Reward && Girls' research

    After an uphill battle, General Li won a great victory. Now the head of state decide to reward him w ...

  4. Codeforces Global Round 9 B. Neighbor Grid (构造,贪心)

    题意:给一个\(n\)X\(m\)的矩阵,矩阵中某个数字\(k\)表示其四周恰好有\(k\)个不为0的数字,你可以使任意位置上的数字变大,如果操作后满足条件,输出新矩阵,否则输出NO. 题解:贪心,既 ...

  5. 国产网络损伤仪 SandStorm -- 只需要拖拽就能删除链路规则

    国产网络损伤仪SandStorm可以模拟出带宽限制.时延.时延抖动.丢包.乱序.重复报文.误码.拥塞等网络状况,在实验室条件下准确可靠地测试出网络应用在真实网络环境中的性能,以帮助应用程序在上线部署前 ...

  6. K8S(09)交付实战-通过流水线构建dubbo服务

    k8s交付实战-流水线构建dubbo服务 目录 k8s交付实战-流水线构建dubbo服务 1 jenkins流水线准备工作 1.1 参数构建要点 1.2 创建流水线 1.2.1 创建流水线 1.2.2 ...

  7. Explain 索引优化分析

    Explain 语法 # 语法 explain + DQL语句 mysql> explain select * from city where countrycode ='CHN' or cou ...

  8. HDU 4746 Mophues(莫比乌斯反演)题解

    题意: \(Q\leq5000\)次询问,每次问你有多少对\((x,y)\)满足\(x\in[1,n],y\in[1,m]\)且\(gcd(x,y)\)的质因数分解个数小于等于\(p\).\(n,m, ...

  9. java之 javassist简单使用

    0x01.javassist介绍 什么是javassist,这个词一听起来感觉就很懵,对吧~ public void DynGenerateClass() { ClassPool pool = Cla ...

  10. js arrow function return object

    js arrow function return object bug filterData: { type: Object, default: () => {}, required: true ...