初探IndexedDB

背景

随着前端技术突飞猛进地快速发展，web应用功能和体验也逐渐发展到能够和原生应用媲美的程度，前端缓存技术的应用对这起到了不可磨灭的贡献，所以想一探前端的缓存技术，这篇文章主要会介绍在平常开发中比较少接触的IndexedDB

IndexedDB

什么是IndexedDB

IndexedDB简单理解就是前端数据库，提供了一种在用户浏览器中持久存储数据的方法，可是和前端关系型数据不一样的是，IndexedDB采用的key-value键值对存储，这种存储形式的数据库查询更简单快速，IndexedDB分别为同步和异步访问提供了单独的API，可是同步API仅提供在web worker内部使用，所以绝大多数状况，咱们使用的都是异步API，同时IndexedDB也没法突破同源策略的限制，只能访问在同域下的数据

为何要用IndexedDB

提到为何要用IndexedDB就不得不提到咱们常常用的缓存API localStorage和sessionStorage，这两个缓存API能知足咱们开发时的绝大多数需求，简单的键值存储，可是它们有它们的限制：

• 存储空间限制，只有5M
• 只能存储字符串，存储对象类型的数据要用JSON.stringify和parse两个方法转换
• 存储的字段一多就很难管理，存储的字段也没法产生关联

IndexedDB的存储空间是没有限制，可是不一样浏览器可能会对IndexedDB中单个库的大小进行必定的限制，IndexedDB本质上仍是一个数据库，能够存储大量结构化数据（包括文件/blobs）,同时IndexedDB API经过索引的方式实现了数据的高性能搜索

怎么用IndexedDB

前面介绍一堆IndexedDB相关的内容，接下来就来看看具体IndexedDB具体怎么使用，以一个简单的例子来切入，下面直接上具体代码：

var data = [{
  id: 1,
  name: 'Tom',
  age: '18'  
}, {
  id: 2,  
  name: 'Tommy',
  age: '16'
}]  
// 打开数据库，两个参数（数据库名字，版本号），若是数据库不存在则建立一个新的库
var request = window.indexedDB.open('myDatabase', '1')
// 数据库操做过程当中出错，则错误回调被触发
request.onerror = (event) => {
  console.log(event)
}
// 数据库操做一切正常，全部操做后触发
request.onsuccess = (event) => {
  var db = event.target.result
  // 数据读取
  var usersObjectStore = db.transaction('users').objectStore('users')
  var userRequest = usersObjectStore.get(1)
  userRequest.onsuccess = function (event) {
    console.log(event.target.result)
  }
}
// 建立一个新的数据库或者修改数据库版本号时触发
request.onupgradeneeded = (event) => {
  var db = event.target.result
  // 建立对象仓库用来存储数据，把id做为keyPath，keyPath必须保证不重复，至关于数据库的主键
  var objectStore = db.createObjectStore('users', { keyPath: 'id'})
  // 创建索引，name和age可能重复，所以unique设置为false
  objectStore.createIndex('name', 'name', {unique: false})
  objectStore.createIndex('age', 'age', {unique: false})
  // 确保在插入数据前对象仓库已经创建
  objectStore.transaction.oncomplete = () => {
    // 将数据保存到数据仓库
    var usersObjectStore = db.transaction('users', 'readwrite').objectStore('users')
    data.forEach(data => {
      usersObjectStore.add(data)
    })
  }
}
复制代码

上面的例子介绍了IndexedDB的简单用法，当执行完上面的代码后能够在浏览器中看到本身新建的IndexedDB:

考虑到不是全部人都会将IndexedDB应用于实际工做，所以上面只是介绍了简单API的调用，更多关于IndexedDB的用法能够去 MDN学习，真正须要使用的时候，对于其异步API调用若是不作必定的封装，必定会陷入深深的回调地狱，所以这里推荐两个IndexedDB API的封装库:

• Dexie.js
• localForage

应用场景

相信这个话题应该是大部分人最感兴趣的，IndexedDB到底应用在什么地方？前面介绍了这么多，IndexedDB使用比localStorage、sessionStorage复杂得多，若是没有特定的使用场景，开发者必定不会本身给本身找麻烦选择IndexedDB作缓存，结下就来看看IndexedDB适用的场景：

• 不须要网络链接的纯离线应用，好比Todolist这类的用来记录待办任务类型的应用，

  

  在不考虑须要联网的登陆、分享功能下，待办事项、收件箱、任务核心功能彻底能够用IndexedDB作数据库存储，配合Electron作一个桌面应用

• 须要存储大量数据的应用，好比图书管理系统这类的须要存储大量数据的应用，彻底能够将图书信息存储在IndexedDB中

• 配和service worker构建pwa应用，用来缓存网络请求

总结

这篇文章简单介绍了IndexedDB的相关内容，总的来讲，IndexedDB的应用频率并不高，这是因为IndexedDB适用复杂度和很少的适用场景决定的，所以这里也只是对它作了简单介绍，但愿看了这篇文章后，能对IndexedDB有个简单的了解，在须要使用的时候能有个印象。若是有错误或不严谨的地方，欢迎批评指正，若是喜欢，欢迎点赞