前言本文版权归作者所有，未经授权不得转载。

indexedDB是HTML5标准，是前未经授权，禁止复制转载。【转载请注明来源】端实现结构化数据存储的最关键因素。基于i【作者：唐霜】著作权归作者所有，禁止商业用途转载。ndexedDB驱动，前端应用可以做到更【转载请注明来源】【原创内容，转载请注明出处】加厉害的应用体验。和localStora原创内容，盗版必究。【转载请注明来源】ge相比，indexedDB的最主要优势本文版权归作者所有，未经授权不得转载。【作者：唐霜】在于，indexedDB是一个完整的数据【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。库模型，它具有数据库应该有的库表结构，丰【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】富的查询方式等等。除此之外，localS【版权所有，侵权必究】【版权所有】唐霜 www.tangshuang.nettorage的容量在5M左右，而inde【原创不易，请尊重版权】【转载请注明来源】xedDB达到惊人的500M。index【版权所有】唐霜 www.tangshuang.net【转载请注明来源】edDB还有可以存储arraybuffe未经授权，禁止复制转载。【转载请注明来源】r，进程为异步等特征，这些特质都使得使用本文作者：唐霜，转载请注明出处。【关注微信公众号：wwwtangshuangnet】indexedDB作为前端数据存储的不二【版权所有，侵权必究】未经授权，禁止复制转载。之选，localStorage降级为用于【未经授权禁止转载】【未经授权禁止转载】存储散列的快速读取配置项的存储工具。

但是，indexedDB有一个缺点，由于本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。它需要支持完整的数据库驱动模型，因此，a本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。pi较为复杂，概念也是一层套一层。我写过【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】《indexedDB中文教程【本文受版权保护】》较为全面的去介绍它，然鹅，当我发现了新本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net知识之后，还在不断的去补充那篇教程，可见【转载请注明来源】【未经授权禁止转载】，如果一个初级开发者要使用原生的inde【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】xedDB api去写代码，会是一件痛苦【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】的事。为了解决这个痛点，我决意写一个优秀未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。的indexedDB操作库。虽然市面上已著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。经有很多库了，但是它们很多都基于inde【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。xedDB原生操作理念去实现，另有一些，【关注微信公众号：wwwtangshuangnet】本文版权归作者所有，未经授权不得转载。特意想要套用sql的理念，导致使用反而更【版权所有】唐霜 www.tangshuang.net著作权归作者所有，禁止商业用途转载。难理解。我经过反复摸索，发布了InDB，未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net它即遵循了indexedDB原生开发的一原创内容，盗版必究。【原创内容，转载请注明出处】些乐趣，开发者再使用它时，可以返回去理解原创内容，盗版必究。【访问 www.tangshuang.net 获取更多精彩内容】indexedDB原生接口，但同时，使用【本文受版权保护】【关注微信公众号：wwwtangshuangnet】它你又可以非常轻松的使用indexedD著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】B，无需太多复杂的理解。

那么InDB到底有多简单呢？这篇文章全面【原创内容，转载请注明出处】【本文首发于唐霜的博客】的去介绍它的使用方法。

关注我博客的同学可能在之前接触过我发布的【未经授权禁止转载】【本文首发于唐霜的博客】HelloIndexedDB，InDB沿【原创不易，请尊重版权】【作者：唐霜】袭了它的使用习惯和风格，但是有一些方法在转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。具体使用上稍有不同。InDB拆分了“DB转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】”和“Store”两个概念，使用 InD原创内容，盗版必究。原创内容，盗版必究。B 只是连接上数据库，需要调用 use 【作者：唐霜】本文作者：唐霜，转载请注明出处。方法才能使用 store。

【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net

基础概念未经授权，禁止复制转载。

虽然InDB最简化了indexedDB的著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】操作，但是，由于indexedDB和lo【本文首发于唐霜的博客】【作者：唐霜】calStorage完全不同，所以，关于【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。这个数据库的基本概念要事先了解。

对于一个数据库引擎，我们要记录一条数据，未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net首先需要打开一个数据库，然后在这个数据库【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net里面选择一个store（也就是sql数据【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net库里面的表），之后才能进行增删改查的工作未经授权，禁止复制转载。【本文受版权保护】。indexedDB完整的继承这一模型，本文作者：唐霜，转载请注明出处。本文版权归作者所有，未经授权不得转载。你需要了解，在使用InDB时，有“数据库【未经授权禁止转载】【转载请注明来源】”“store”“记录”这三层概念存在，转载请注明出处：www.tangshuang.net【本文受版权保护】具体反应到代码中，这三个概念会在实例化参【关注微信公众号：wwwtangshuangnet】【版权所有，侵权必究】数中反应出来。

其次是关于keyPath的概念。inde【访问 www.tangshuang.net 获取更多精彩内容】【版权所有，侵权必究】xedDB存的数据和localStora未经授权，禁止复制转载。原创内容，盗版必究。ge结构不一样，localStorage本文作者：唐霜，转载请注明出处。原创内容，盗版必究。存的是键值对，而indexedDB存的是原创内容，盗版必究。【未经授权禁止转载】object，也就是js对象。就像sql本文作者：唐霜，转载请注明出处。【作者：唐霜】里面一样，要找到一条记录需要通过它的字段【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net去查，而在indexedDB中，被存的o转载请注明出处：www.tangshuang.net【原创内容，转载请注明出处】bject的属性名就相当于字段名，属性值【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net就相当于字段值。而keyPath简单的讲【版权所有，侵权必究】【版权所有，侵权必究】就是object的（某个）属性名。但是，【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。indexedDB的强大之处在于，key原创内容，盗版必究。本文作者：唐霜，转载请注明出处。Path可以是链式的多级属性。比如有一个【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】person对象里面深层级的值可以用pe著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。rson.body.head.left_【版权所有，侵权必究】【原创不易，请尊重版权】eye获得，而这个时候”bo【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】dy.head.left_eyeR著作权归作者所有，禁止商业用途转载。【作者：唐霜】21;就是这个值相对于person对象的【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netkeyPath。（而在某些场景中，为了简本文作者：唐霜，转载请注明出处。【版权所有，侵权必究】化描述，甚至直接将“keyPath”作为未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。“keyPath的值”给简写了。）

再次是关于key的概念。indexedD【本文受版权保护】著作权归作者所有，禁止商业用途转载。B的key的概念有点别扭，它代表的是键值未经授权，禁止复制转载。【本文首发于唐霜的博客】，而非键名。

最后是关于索引的概念。indexedDB【原创内容，转载请注明出处】未经授权，禁止复制转载。如其名，它的特色就是index（索引）。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。indexedDB具备了强大的索引系统，【原创不易，请尊重版权】【访问 www.tangshuang.net 获取更多精彩内容】它根据keyPath创建索引，根据ind【版权所有，侵权必究】未经授权，禁止复制转载。exName查询对象记录，可以对一个in著作权归作者所有，禁止商业用途转载。【作者：唐霜】dexName设置多个keyPath，而【作者：唐霜】本文版权归作者所有，未经授权不得转载。且还可以实现值域查询。总而言之，如果你想【转载请注明来源】【本文受版权保护】利用indexeDB快速查询数据，那么索【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。引要好好利用。

以上就是你在使用InDB之前必须了解的概【原创不易，请尊重版权】未经授权，禁止复制转载。念。其他indexedDB原生概念可以暂【访问 www.tangshuang.net 获取更多精彩内容】转载请注明出处：www.tangshuang.net时不用了解。

快速入门本文作者：唐霜，转载请注明出处。

本节让你快速使用InDB进行数据的存取。

包的安装和使用【原创不易，请尊重版权】

InDB是一个npm包，通过npm进行安【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】装：

npm i indb

安装之后，你可以根据你的编程需求选择不同【访问 www.tangshuang.net 获取更多精彩内容】【关注微信公众号：wwwtangshuangnet】的使用方式：

// webpack
import InDB from 'indb'

// CommonJS
const { InDB } = require('indb')

在HTML中直接使用时，你需要把indb【版权所有】唐霜 www.tangshuang.net【转载请注明来源】/dist/indb.js文件拷贝到你的【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.net本地目录：

<script src="./node_modules/indb/dist/indb.js"></script>
<script>
const { InDB } = window['indb'] // 注意这里的使用方法
</script>

使用【原创内容，转载请注明出处】

接下来，你就可以像localStorag【版权所有】唐霜 www.tangshuang.net【未经授权禁止转载】e一样，使用这个store，不过，由于i转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netndexedDB是异步操作的，你的所有操著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】作都必须是异步完成。

let obj = await store.getItem('key')
await store.setItem('key', 'value')

这样我们就完成了对InDB的初步认识。下【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。文，我们会分开详细介绍它的各个细节方面。

实例化参数【版权所有】唐霜 www.tangshuang.net

这一节将会是InDB整个使用中最难的部分【本文首发于唐霜的博客】【原创内容，转载请注明出处】，一旦掌握了本节的内容，其他的方面完全就【版权所有，侵权必究】本文作者：唐霜，转载请注明出处。无需担忧了。

在上一节的时候，我们直接使用InDB.g【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。etItem，这种做法是最简单的做法，但本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。这样不能发挥出indexedDB的强大功【版权所有】唐霜 www.tangshuang.net原创内容，盗版必究。能，相当于把它当作一个localStor著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。age的替代品，没意思。本节我们学习实例【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net化参数，这些参数被用来作为对indexe【本文首发于唐霜的博客】【原创不易，请尊重版权】dDB进行操作前的准备工作。

我们要使用InDB来操作indexedD转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】B，要经过步骤：

1. 连接到数据库【访问 www.tangshuang.net 获取更多精彩内容】
未经授权，禁止复制转载。原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。【本文首发于唐霜的博客】
2. 打开一个store原创内容，盗版必究。
【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。【本文受版权保护】
3. 写入或修改数据【转载请注明来源】
未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。著作权归作者所有，禁止商业用途转载。

具体操作如下：【作者：唐霜】

const idb = new InDB(options) // 实例化InDB，得到一个可以连接数据库的实例
const store = idb.use('store1') // 通过use方法，打开一个store

参数列表【版权所有，侵权必究】

在进行InDB实例化时，需要传入参数：著作权归作者所有，禁止商业用途转载。

上面就是所有参数字段，看上去非常简单。但【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】是不要急，复杂的东西在后面。

store的配置【版权所有】唐霜 www.tangshuang.net

上面的stores参数是一个数组，而数组【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】的每一个元素，代表要创建怎样的一个sto本文版权归作者所有，未经授权不得转载。【版权所有，侵权必究】re出来。

{
  name: store的名称，必填
  keyPath: 主键名，也就是说，一个object的什么属性（路径）会被作为这个store的最主要查询依据
  indexes: 索引列表
  autoIncrement: 主键是否自增，设置为true时，在向store添加对象的时候，主键值可不传
  isKv: 是否开启key-value模式，只有开启key-value模式的store才会拥有getItem/setItem/removeItem这几个方法，并且用这几个方法像操作localStorage一样操作indexedDB，不开启的情况下，不能使用这几个方法
}

上面比较难理解的是autoIncreme【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.netnt，所以，我的建议是不设置这个值。

index的配置【本文首发于唐霜的博客】

上面的indexes配置项是个数组，而其转载请注明出处：www.tangshuang.net本文版权归作者所有，未经授权不得转载。中每个元素代表要给这个store创建怎样【原创不易，请尊重版权】【原创内容，转载请注明出处】的索引。

{
  name: index的name，查询的时候用到
  keyPath: 索引对应object的什么属性（路径）
  unique: 是否为唯一索引，为true的时候，整个store里面该keyPath对应的值不能有重复
}

上面比较难理解的是keyPath，ind【原创不易，请尊重版权】本文作者：唐霜，转载请注明出处。ex的keyPath和store的key【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。Path理解上不一样。index的key【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。Path是指，当你用index的name【原创不易，请尊重版权】未经授权，禁止复制转载。去查询的时候，实际要查询的object的【本文受版权保护】未经授权，禁止复制转载。属性名，indexName相当于是ind未经授权，禁止复制转载。【原创不易，请尊重版权】exKeyPath的一个别名，方便在查询本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】的时候使用较短的字符串去代替。

基础API【作者：唐霜】

本节介绍通用API，利用这些api你可以本文作者：唐霜，转载请注明出处。【作者：唐霜】快速操作indexedDB。这些方法全部【作者：唐霜】【本文首发于唐霜的博客】为实例化对象的方法，使用时，需先得到实例著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。化对象。每个实例对应一个库，在进行操作时【本文受版权保护】未经授权，禁止复制转载。，一个操作只能对应一个store，不能同本文版权归作者所有，未经授权不得转载。原创内容，盗版必究。时用一个实例操作多个store。你可以通【本文受版权保护】本文版权归作者所有，未经授权不得转载。过use方法得到对不同store的实例，【原创不易，请尊重版权】【版权所有，侵权必究】通过它们来操作不同store。

get转载请注明出处：www.tangshuang.net

根据store的key获取一个对象。ke未经授权，禁止复制转载。【未经授权禁止转载】y是keyPath的值。

let value = await store.get(key)

• @param {String} key 【转载请注明来源】【原创内容，转载请注明出处】主键值，注意，是值，不是名
【关注微信公众号：wwwtangshuangnet】【转载请注明来源】原创内容，盗版必究。【未经授权禁止转载】
• @return {Object} val本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ue
【作者：唐霜】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。

add【本文首发于唐霜的博客】

向store中插入一条新记录。转载请注明出处：www.tangshuang.net

await store.add({ id, name, age })

相当于sql中的insert操作，需要注原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。意，indexedDB中，对add的数据【本文首发于唐霜的博客】著作权归作者所有，禁止商业用途转载。格式有要求，必须符合下面其中之一

• options中没有设置autoIncr本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。ement，在add的对象中，必须包含k原创内容，盗版必究。【版权所有，侵权必究】eyPath属性，且key值相同的记录不原创内容，盗版必究。本文版权归作者所有，未经授权不得转载。能存在于store中
转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】【作者：唐霜】未经授权，禁止复制转载。
• options中设置了autoIncer【转载请注明来源】【访问 www.tangshuang.net 获取更多精彩内容】ment为true，那么在add对象时，原创内容，盗版必究。【原创内容，转载请注明出处】不必传keyPath，add成功时，会自【本文首发于唐霜的博客】【本文受版权保护】动为该object加上该属性，并且保持自【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】增的效果
本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net

如果add的对象key值已经存在于sto【本文首发于唐霜的博客】【版权所有】唐霜 www.tangshuang.netre中，会报错，因此，比较常规的操作是用本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】put代替add。

put本文作者：唐霜，转载请注明出处。

更新store中的一条数据，如果传入对象本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】的key值不存在，就插入这条数据。

await store.put({ id, name, age })

put中key值其实也遵循上面add的规未经授权，禁止复制转载。【未经授权禁止转载】律，如果autoIncrement设置为原创内容，盗版必究。【未经授权禁止转载】true，那么不给key时，就是添加，给【访问 www.tangshuang.net 获取更多精彩内容】【本文首发于唐霜的博客】key时，就是更新。

一般，在代码中我们尽量少使用autoIn著作权归作者所有，禁止商业用途转载。著作权归作者所有，禁止商业用途转载。crement配置，因为我们很难完全掌握【原创不易，请尊重版权】【原创内容，转载请注明出处】数据的实际情况。我们尽量使用put，而不【转载请注明来源】转载请注明出处：www.tangshuang.net是add，因为代码一旦部署，它就不能修改本文版权归作者所有，未经授权不得转载。【作者：唐霜】，如果在执行中add报错，那么很可能阻塞未经授权，禁止复制转载。转载请注明出处：www.tangshuang.net你的程序。

delete原创内容，盗版必究。

从store中删除一条数据。著作权归作者所有，禁止商业用途转载。

await store.delete(key)

传入key值。【原创不易，请尊重版权】

以上是InDB中最基础的api，利用这些著作权归作者所有，禁止商业用途转载。【版权所有】唐霜 www.tangshuang.netapi，就可以实现最基础的数据增删改查了【未经授权禁止转载】【版权所有，侵权必究】。

remove转载请注明出处：www.tangshuang.net

从store中删除一条数据，和delet【访问 www.tangshuang.net 获取更多精彩内容】【转载请注明来源】e不同的是，remove直接接收这个对象【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net。

await store.remove(obj)

它会自动去找到obj上的keyPath，著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net然后用delete去删除。

另外，使用delete的时候，你需要传入未经授权，禁止复制转载。【作者：唐霜】的是keyPath的值，而如果你的key【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】Path是多级路径，例如’b【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。ody.hands’这样的路【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】径，那么要取到key也是挺麻烦的，你需要转载请注明出处：www.tangshuang.net【本文首发于唐霜的博客】自己有一套解析keyPath的工具。而I【原创内容，转载请注明出处】本文作者：唐霜，转载请注明出处。nDB内置了这样的功能，使用remove【未经授权禁止转载】本文版权归作者所有，未经授权不得转载。不用担心这个问题，只要你的obj是一个和转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】数据库中记录对应的上的对象，就能被正确删未经授权，禁止复制转载。【本文首发于唐霜的博客】除。

clear著作权归作者所有，禁止商业用途转载。

清空store中的所有数据，注意备份！！

awiat store.clear()

查询API【转载请注明来源】

基础api仅仅是最基础功能的实现，还没有【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】涉及indexedDB真正强大的地方。i【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.netndexedDB真正强大的地方是利用索引本文版权归作者所有，未经授权不得转载。【本文首发于唐霜的博客】进行查询，因此，我们要发挥这些能力，我们未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。就会用到下面的api。

注意：依赖于 index 的查询 API未经授权，禁止复制转载。未经授权，禁止复制转载。 需要在创建仓库时传入对应的 index转载请注明出处：www.tangshuang.net【关注微信公众号：wwwtangshuangnet】es，即使该属性已经被 keyPath 【关注微信公众号：wwwtangshuangnet】【原创内容，转载请注明出处】使用，也要在 indexes 中再次声明【版权所有，侵权必究】【版权所有，侵权必究】，否则无法使用下面的查询接口。

【本文受版权保护】著作权归作者所有，禁止商业用途转载。【未经授权禁止转载】【本文受版权保护】

find本文版权归作者所有，未经授权不得转载。

从store中找到第一条indexNam本文作者：唐霜，转载请注明出处。【未经授权禁止转载】e为某值的记录。

let obj = await store.find(indexName, value)

要使用find的前提是，你的store在本文版权归作者所有，未经授权不得转载。转载请注明出处：www.tangshuang.net配置时传入了对应的index，否则是不能原创内容，盗版必究。未经授权，禁止复制转载。根据索引找到值的。

const store = new InDB({
  name: 'my-idb',
  stores: [
    {
      name: 'my-store',
      keyPath: 'id',
      indexes: [
        {
          name: 'indexName',
          keyPath: 'age',
        },
      ],
    },
  ],
})

注意上面红色的部分，只有当你在创建sto【版权所有】唐霜 www.tangshuang.net【转载请注明来源】re的时候，设置了这个索引，才能使用fi原创内容，盗版必究。【版权所有】唐霜 www.tangshuang.netnd去使用它：

let obj = await store.find('indexName', 10)

这样就可以找到第一条age=10的数据了【访问 www.tangshuang.net 获取更多精彩内容】著作权归作者所有，禁止商业用途转载。，相当于sql里面的where age=【原创内容，转载请注明出处】【版权所有，侵权必究】10 limit 1的子句。

注意，我这里传入的是indexName，【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。但是indexedDB实际会使用keyP本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netath，也就是’age【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。217;字段作为查询条件。关于keyPa转载请注明出处：www.tangshuang.net转载请注明出处：www.tangshuang.netth前面已经解释过了，这里不再赘述。

query著作权归作者所有，禁止商业用途转载。

查询出store中所有满足条件的记录，返【未经授权禁止转载】【本文受版权保护】回一个数组。

let objs = await store.query(indexName, value, compare)

find仅仅找到第一条数据，而query原创内容，盗版必究。【原创内容，转载请注明出处】则可以找出所有满足条件的记录。和find【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】一样，它也必须是index支持的才能使用【本文首发于唐霜的博客】【本文受版权保护】。

let objs = await store.query('indexName', 10)

这样就可以查出age=10的所有记录。【未经授权禁止转载】

query比find更强大的地方在于，它未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】支持条件筛选，它的第三个参数可以传入比较【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】运算符。

let objs = await store.query('indexName', 10, '>')

表示查出所有age>10的记录，支【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】持的条件如下：

• > 大于著作权归作者所有，禁止商业用途转载。
转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。【原创内容，转载请注明出处】【版权所有】唐霜 www.tangshuang.net
• >= 大于等于本文作者：唐霜，转载请注明出处。
本文作者：唐霜，转载请注明出处。【本文受版权保护】原创内容，盗版必究。本文作者：唐霜，转载请注明出处。
• < 小于本文作者：唐霜，转载请注明出处。
【本文受版权保护】【本文首发于唐霜的博客】本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。
• <= 小于等于本文版权归作者所有，未经授权不得转载。
【本文受版权保护】【未经授权禁止转载】【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net
• != 不等于原创内容，盗版必究。
本文作者：唐霜，转载请注明出处。【原创不易，请尊重版权】【原创不易，请尊重版权】转载请注明出处：www.tangshuang.net未经授权，禁止复制转载。
• = 等于，默认值【未经授权禁止转载】
原创内容，盗版必究。【本文受版权保护】【本文受版权保护】
• % 包含，仅字符串生效，类比于sql中的【作者：唐霜】未经授权，禁止复制转载。LIKE
【原创不易，请尊重版权】【关注微信公众号：wwwtangshuangnet】【原创不易，请尊重版权】原创内容，盗版必究。著作权归作者所有，禁止商业用途转载。
• in 包含于，value必须是一个数组，著作权归作者所有，禁止商业用途转载。【本文首发于唐霜的博客】仅js基本数据类型有效，类比于sql中的转载请注明出处：www.tangshuang.net【作者：唐霜】IN
【版权所有】唐霜 www.tangshuang.net【本文首发于唐霜的博客】【访问 www.tangshuang.net 获取更多精彩内容】【原创内容，转载请注明出处】

在使用!=、%和in的时候一定要注意，由【转载请注明来源】原创内容，盗版必究。于indexedDB内部还不支持这3种查【未经授权禁止转载】【原创不易，请尊重版权】询方式，但InDB可以支持。说到这里，可原创内容，盗版必究。【关注微信公众号：wwwtangshuangnet】以将index配置项里面都只配置name【关注微信公众号：wwwtangshuangnet】未经授权，禁止复制转载。属性，这样keyPath属性会自动使用n转载请注明出处：www.tangshuang.net【转载请注明来源】ame属性。

const store = new InDB({
  name: 'my-idb',
  stores: [
    {
      name: 'my-store',
      keyPath: 'id',
      indexes: [
        {
          name: 'body.head', // 这样可以保证name和keyPath的值是一样的
        },
      ],
    },
  ],
})

不过上面也只是建议，最后根据你的实际情况【原创内容，转载请注明出处】原创内容，盗版必究。来确定。

select【作者：唐霜】

查询出store中所有满足条件的记录，返【转载请注明来源】本文版权归作者所有，未经授权不得转载。回一个数组。

let objs = await store.select([
  { key: 'name', value: 'c', compare: '>' },
  { key: 'age', value: 10, compare: '>' },
  { key: 'age', value: 20, compare: '<' },
])

虽然indexedDB很强大，但是仅支持【版权所有，侵权必究】【原创不易，请尊重版权】单索引查询，而无法做到多个索引同时联系起【转载请注明来源】【版权所有，侵权必究】来查询。为了实现这一功能，我实现了sel本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.netect方法，这个方法可以让你同时使用多个【访问 www.tangshuang.net 获取更多精彩内容】【本文受版权保护】查询条件，并且取一定的逻辑关系。例如上面本文作者：唐霜，转载请注明出处。本文作者：唐霜，转载请注明出处。这段代码，它可以查询出name>&原创内容，盗版必究。【版权所有，侵权必究】#8217;c’同时10&l未经授权，禁止复制转载。【访问 www.tangshuang.net 获取更多精彩内容】t;age<20的所有记录。

select接收一个数组，数组中的每个元未经授权，禁止复制转载。【版权所有】唐霜 www.tangshuang.net素都是一个查询条件，它可以包含如下属性：

• key: 索引名称【版权所有】唐霜 www.tangshuang.net
【转载请注明来源】本文作者：唐霜，转载请注明出处。原创内容，盗版必究。
• value: 要查询的目标属性值未经授权，禁止复制转载。
【版权所有】唐霜 www.tangshuang.net【版权所有】唐霜 www.tangshuang.net【本文受版权保护】【原创内容，转载请注明出处】
• compare: 被检查记录和value【原创内容，转载请注明出处】【原创内容，转载请注明出处】之间的关系，比较符在query一节已经讲本文版权归作者所有，未经授权不得转载。【转载请注明来源】过了
【本文首发于唐霜的博客】转载请注明出处：www.tangshuang.net著作权归作者所有，禁止商业用途转载。本文版权归作者所有，未经授权不得转载。
• optional: 该条检索条件是否是可【作者：唐霜】转载请注明出处：www.tangshuang.net选的，相当于sql里面的OR子句
【转载请注明来源】【关注微信公众号：wwwtangshuangnet】【版权所有】唐霜 www.tangshuang.net

optional这个选项有点难理解，简单【版权所有】唐霜 www.tangshuang.net本文作者：唐霜，转载请注明出处。的说，它就是sql里面的OR，而sele【本文受版权保护】本文作者：唐霜，转载请注明出处。ct方法的查询方式非常简单，没有opti未经授权，禁止复制转载。未经授权，禁止复制转载。onal或者optional为false原创内容，盗版必究。【原创内容，转载请注明出处】的，被认为是AND子句，先进行查询，所有未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。optional为true的被视为一个整【本文受版权保护】【版权所有】唐霜 www.tangshuang.net体，最后进行查询，在满足AND的基础上，【转载请注明来源】本文作者：唐霜，转载请注明出处。只有满足任意一条OR的子句的记录才会在结【原创内容，转载请注明出处】【关注微信公众号：wwwtangshuangnet】果集合中，否则就不在。而如果你的条件里面本文作者：唐霜，转载请注明出处。转载请注明出处：www.tangshuang.net，全部都是optional为true，那【访问 www.tangshuang.net 获取更多精彩内容】本文版权归作者所有，未经授权不得转载。么相当于只有一条AND语句，也就是说只要【本文首发于唐霜的博客】【原创不易，请尊重版权】记录满足任何一条规则，即可被返回。

let objs = await store.select([
  { key: 'name', value: 'c', compare: '>' },
  { key: 'age', value: 10, compare: '<', optional: true },
  { key: 'age', value: 20, compare: '>', optional: true },
])

这条查询相当于 name>R转载请注明出处：www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】17;c’ AND (age未经授权，禁止复制转载。著作权归作者所有，禁止商业用途转载。<10 OR age>20)未经授权，禁止复制转载。原创内容，盗版必究。。所有类似的语句都能转化为 (a AND【作者：唐霜】【本文首发于唐霜的博客】 b AND c) AND (d OR 【原创内容，转载请注明出处】著作权归作者所有，禁止商业用途转载。e OR f) 这样的句子，你只要记住所【关注微信公众号：wwwtangshuangnet】本文作者：唐霜，转载请注明出处。有条件被分为两组，AND 子句被视作一个【未经授权禁止转载】【版权所有】唐霜 www.tangshuang.net整体先判断，在成立的情况下，再把 OR 原创内容，盗版必究。【转载请注明来源】子句被视作一个整体后判断，就可以轻松理解著作权归作者所有，禁止商业用途转载。本文作者：唐霜，转载请注明出处。了。

但是，这样的查询没有办法做到 (a AN本文版权归作者所有，未经授权不得转载。【原创内容，转载请注明出处】D b) OR (c AND d) 这样本文作者：唐霜，转载请注明出处。【转载请注明来源】的查询，我们在业务中经常需要查询多个条件【关注微信公众号：wwwtangshuangnet】【关注微信公众号：wwwtangshuangnet】的并集，所以，我提供了一种方式来获得多个【原创不易，请尊重版权】著作权归作者所有，禁止商业用途转载。条件的并集，即：你可以传入多个数组来作为本文版权归作者所有，未经授权不得转载。本文作者：唐霜，转载请注明出处。多个条件。语法如下：

await store.select(
  [ ... ],
  [ ... ]
)

通常情况下，你只会传入一个参数，但是在有【版权所有，侵权必究】【转载请注明来源】取多个并集时，可以传入多个参数，每个参数著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】的结构都是一样的。这样可以获得多个查询结【未经授权禁止转载】【本文首发于唐霜的博客】果的并集。

但是，我没有提供 (a OR b) AN【转载请注明来源】著作权归作者所有，禁止商业用途转载。D (c OR d) 这样的查询能力，你著作权归作者所有，禁止商业用途转载。【原创不易，请尊重版权】需要把它转化为 (a AND c) OR著作权归作者所有，禁止商业用途转载。原创内容，盗版必究。 (b AND d) 的查询，当然，这要【本文首发于唐霜的博客】【本文首发于唐霜的博客】根据实际情况来决定怎么组合在一起，而不是本文版权归作者所有，未经授权不得转载。本文版权归作者所有，未经授权不得转载。像我这里直接把 a&c b&am【版权所有】唐霜 www.tangshuang.net【原创不易，请尊重版权】p;d 组合在一起。举个例子，你需要查询【作者：唐霜】【原创不易，请尊重版权】年龄小于10或大于30，且体重小于40或著作权归作者所有，禁止商业用途转载。【访问 www.tangshuang.net 获取更多精彩内容】140的学生集合，正常的写法是 (age未经授权，禁止复制转载。本文版权归作者所有，未经授权不得转载。<10 OR age>30)【版权所有，侵权必究】【访问 www.tangshuang.net 获取更多精彩内容】 AND (weight<40 O著作权归作者所有，禁止商业用途转载。未经授权，禁止复制转载。R weight>140)，但是我【访问 www.tangshuang.net 获取更多精彩内容】【原创不易，请尊重版权】们不支持这种查询语法，此时，我们要分析具原创内容，盗版必究。【原创不易，请尊重版权】体的需求，在草稿纸上画出两条查询之间的内转载请注明出处：www.tangshuang.net【原创不易，请尊重版权】在逻辑，就可以知道它可以用 (age&l【关注微信公众号：wwwtangshuangnet】著作权归作者所有，禁止商业用途转载。t;10 AND weight<4本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。0) OR (age>30 AND【本文首发于唐霜的博客】【原创不易，请尊重版权】 weight>140) 来表达。本文作者：唐霜，转载请注明出处。【版权所有】唐霜 www.tangshuang.net当然，不是所有情况都是这样的，这需要你在【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。草稿纸上画出每条查询之间的联系。

<---|  10 age 30  |-------->
<----| 40  wieght  140 |--->

通过这种分析得到一个可用的语法。但是实际本文作者：唐霜，转载请注明出处。【本文首发于唐霜的博客】上，我们很少在业务中出现这种需求，毕竟我本文作者：唐霜，转载请注明出处。【本文受版权保护】们不是在做 SQL 的复杂查询。

注意：find、query、select【关注微信公众号：wwwtangshuangnet】【作者：唐霜】都要求你使用indexes配置才能使用。

first【原创不易，请尊重版权】

返回store中的第一条数据。转载请注明出处：www.tangshuang.net

let firstRecord = await store.first()

last本文作者：唐霜，转载请注明出处。

返回store中的最后一条数据。【未经授权禁止转载】

let lastRecord = await store.last()

some【本文首发于唐霜的博客】

返回几条连续的数据。转载请注明出处：www.tangshuang.net

• count: 返回的数量【本文首发于唐霜的博客】
【本文首发于唐霜的博客】【关注微信公众号：wwwtangshuangnet】【本文首发于唐霜的博客】本文作者：唐霜，转载请注明出处。
• offset: 位移量，即从哪个索引开始著作权归作者所有，禁止商业用途转载。转载请注明出处：www.tangshuang.net，默认为0
转载请注明出处：www.tangshuang.net【版权所有】唐霜 www.tangshuang.net本文版权归作者所有，未经授权不得转载。

let someRecords = await store.some(5, 3)

表示从索引值为3开始，返回连续的5条记录著作权归作者所有，禁止商业用途转载。【版权所有，侵权必究】。

当offset小于0时，查询将会移到所有著作权归作者所有，禁止商业用途转载。【原创内容，转载请注明出处】记录的尾部，例如：

let someRecords = await store.some(3, -5)

则会从倒数第5个记录开始拿取，一共拿出3【访问 www.tangshuang.net 获取更多精彩内容】【未经授权禁止转载】个。

all本文版权归作者所有，未经授权不得转载。

返回store中的所有数据，结果为数组。

let allRecords = await store.all()

count【转载请注明来源】

返回store中所有数据的条数，结果为数【版权所有，侵权必究】【关注微信公众号：wwwtangshuangnet】字。

let count = await store.count()

keys【原创内容，转载请注明出处】

返回store中所有记录的主键值，结果为【版权所有】唐霜 www.tangshuang.net未经授权，禁止复制转载。一个数组。

let keys = await store.keys()

上述就是所有InDB提供的查询api，这【关注微信公众号：wwwtangshuangnet】【转载请注明来源】些api具有非常简洁易用的特征，而且很多【作者：唐霜】【作者：唐霜】情况下，你并不需要复杂的api，用上面这【转载请注明来源】本文作者：唐霜，转载请注明出处。些api完全可以满足你的查询需求。

Key-Value API本文版权归作者所有，未经授权不得转载。

在InDB里面，有几个特殊的API，它们本文版权归作者所有，未经授权不得转载。【未经授权禁止转载】和原生的Storage api命名保持一未经授权，禁止复制转载。【原创内容，转载请注明出处】致。要使用这些api，你必须在创建sto【访问 www.tangshuang.net 获取更多精彩内容】本文作者：唐霜，转载请注明出处。re时，在store的参数中使用isKv本文版权归作者所有，未经授权不得转载。【本文受版权保护】为true，这样做之后，keyPath配【访问 www.tangshuang.net 获取更多精彩内容】【版权所有】唐霜 www.tangshuang.net置，autoIncrement配置都将失【作者：唐霜】转载请注明出处：www.tangshuang.net效，但它可以把当前这个store转化为一【本文首发于唐霜的博客】【本文首发于唐霜的博客】个支持Storage api的store本文版权归作者所有，未经授权不得转载。未经授权，禁止复制转载。。

const store = new InDB({
  name: 'my-idb',
  stores: [
    {
      name: 'my-store',
      isKv: true,
    },
  ],
  use: 'my-store',
})

这样配置之后（注意，在你的代码第一次发布【原创内容，转载请注明出处】【原创内容，转载请注明出处】上线之前就必须这样做，而不能等到后面发布本文版权归作者所有，未经授权不得转载。【关注微信公众号：wwwtangshuangnet】新版本的时候再调整，否则你必须通过升级v原创内容，盗版必究。本文作者：唐霜，转载请注明出处。ersion值来办到），这个store就【版权所有，侵权必究】本文版权归作者所有，未经授权不得转载。可以调用如下api。

getItem未经授权，禁止复制转载。

获取对应key的值。【版权所有，侵权必究】

let value = await store.getItem(key)

setItem本文版权归作者所有，未经授权不得转载。

设置对应key的值。【版权所有】唐霜 www.tangshuang.net

await store.setItem(key, value)

removeItem未经授权，禁止复制转载。

删除对应的key-value。【未经授权禁止转载】

awiat store.removeItem(key)

以上就是Storage api，这使得使本文版权归作者所有，未经授权不得转载。【访问 www.tangshuang.net 获取更多精彩内容】用InDB之后，可以像使用localSt【版权所有，侵权必究】【原创不易，请尊重版权】orage一样操作indexedDB，非【版权所有，侵权必究】著作权归作者所有，禁止商业用途转载。常方便。

遍历API未经授权，禁止复制转载。

这一些特殊情况下，你可能还需要更奇特的操【原创内容，转载请注明出处】【原创不易，请尊重版权】作，InDB提供了几个可能对你有帮助的a【原创内容，转载请注明出处】转载请注明出处：www.tangshuang.netpi，利用它们，你可以办到任何你想干的事【访问 www.tangshuang.net 获取更多精彩内容】未经授权，禁止复制转载。。

each【原创不易，请尊重版权】

遍历当前store。【原创不易，请尊重版权】

await store.each((obj) => {
  // ..
})

通过each，可以遍历整个store，这【转载请注明来源】【原创内容，转载请注明出处】样，如果当上面的api不能满足你的查询需【版权所有】唐霜 www.tangshuang.net【访问 www.tangshuang.net 获取更多精彩内容】求的时候，你可以自己写一个遍历操作来搜集著作权归作者所有，禁止商业用途转载。【关注微信公众号：wwwtangshuangnet】所有满足你的条件的记录。

each接收一个函数，函数可以有如下参数【版权所有】唐霜 www.tangshuang.net【版权所有，侵权必究】：

• obj: 当前的记录转载请注明出处：www.tangshuang.net
【原创内容，转载请注明出处】本文版权归作者所有，未经授权不得转载。【原创不易，请尊重版权】【版权所有】唐霜 www.tangshuang.net

let tx = await store.transaction(true)

let objectStore = await store.objectStore()

await store.cursor({
  index:'indexName',
  ranage:null, // [IDBKeyRange](https://developer.mozilla.org/en-US/docs/Web/API/IDBKeyRange)
  direction:'next', // next or prev
  writable:false, // true or false
  onTouch, // function, (cursor, owner) => {}, `owner` is the owner of cursor (objectStore or index)
  onDone, // function
  onError, // function
})

await store.iterate((cursor, next, stop) => {
  // ...
}, {
  writable: false,
  direction: 'next',
})

await store.request(fn, { writable })

store.request(objectStore => objectStore.get(key)).then(obj => console.log(obj))

store.batch([
  objectStore => objectStore.put(obj1),
  objectStore => objectStore.put(obj2),
  objectStore => objectStore.remove(obj3),
], {
  writable: true,
})

let keyPath = store.keyPath

const db = idb.connect()

const store2 = idb.use('store2')

export const store = new InDB({
  name: 'my-idb',
  version: 2,
  stores: [
    {
      name: 'my-store',
      isKv: true,
    },
    {
      name: 'my-store2',
      keyPath: 'id',
    },
  ],
  use: 'my-store',
})
export const store2 = store.use('store2')

如果你觉得本书对你有帮助，通过下方的二维码向我打赏吧，帮助我写出更多有用的内容。

2018-09-15