IndexedDB

新的技术--IndexedDB(上)免费看

IndexedDB是什么,IndexedDB基础使用方法,IndexedDB的写入和读取

2018-08-21侠课岛    初级拔高       

前端/前端/客户端存储 19     0     2313

这一章要介绍的 IndexedDB 相对于简单轻巧的 Cookie 和 WebStorage 来说,可以算是一个庞然大物了,可以说是整个课程中最复杂的一部分。那么在开始之前,请各位小伙伴做好心理准备。

4.1 拥抱新技术——IndexedDB 介绍

IndexedDB 是 HTML5 中提供的一种存储方式。从名字就可以看出,这是一个真正的数据库。如果你有使用过 MongoDB 的话,那么这一章可能会稍微好理解一些。毕竟,IndexedDB 与 MongoDB 一样都是对象型数据库,在存储的方面有些类似。在正式介绍之前,我们照例先来看一下浏览器的兼容性。

可以看到基本上主流的浏览器都支持了 IndexedDB(IE 系部分支持)。因此我们基本上可以放心使用。不过移动端的浏览器老版本可能兼容性上会有问题,所以还是要谨慎使用。在实际使用之前,我们可以通过使用 "indexedDB" in window 的方法来进行检查,确保浏览器兼容。

数据库、对象存储以及索引

IndexedDB 是真正意义上的数据库。出于安全性上的考虑,每一个域名为独立分开,我们可以不用担心库名、表名重复的问题(我们可以理解一个域名就是一个 MySQL)。IndexedDB 存储容量很大,大概在 250MB 左右,对于目前来说完全可以满足小型应用的需求。当超出一定的储存容量时,不同的浏览器会有不同的操作,不过一般我们不用担心。

数据在 IndexedDB 中是以对象存储的形式存在。不同于 MySQL 这样传统的关系型数据库的二维表,而是更接近 MongoDB 中的 Schema,可以方便我们灵活地定义数据结构。不过要设计出好的对象存储结构,远远要比关系型的二维表要难。这需要我们在实践中的积累和经验。

最后,IndexedDB 最大的特征就是 index 索引了。索引是对象存储的一种检索方式,可以快速地帮我们检索到需要的数据。而这也是和之前 Cookie、WebStorage 不同的地方。

关于调试方面也不用担心,Chrome 中早已在开发者工具的 Application 面板中添加了 IndexedDB 的菜单。我们可以在这里查看 IndexedDB 的内容。本课程所涉及的调试,也全都是利用 Chrome 的开发者工具。

4.2 IndexedDB 基础使用方法

这一节开始,我们介绍 IndexedDB 的使用方法。如上面所介绍,IndexedDB 是最大的容器,我们若需要使用则需要从创建数据库开始。然后在库上创建对象存储,最后才是进行数据的操作与使用。大致的步骤可以用下图来表示。

库的创建

首先我们来看一下库的创建,请先确保浏览器支持 IndexedDB 哦~库的创建非常简单,我们只要使用 indexedDB.open 方法,并且传入库名和版本号即可。其中版本号并非为创建时的必须字段,一般为 1 。但是在当我们对数据库进行对象存储或者索引的更新时,就必须要更新版本号。下面我们来看一下实际的代码。

var open = indexedDB.open('db1', 1)

open.onupgradeneeded = function(e){
  console.log('触发了 upgradeneeded 事件')
  console.log(e)
}

open.onsuccess = function(e){
  console.log('触发了 success 事件')
  console.log(e)
}

open.onerror = function(e){
  console.log('触发了 error 事件')
  console.log(e)
}

若只有 open 方法,那是什么都做不了的,由于 IndexedDB 的所有操作都是异步的,我们必须要在响应函数内执行操作。open 方法在使用后会触发 successerrorupgradeneededblock 方法。其他几个方法我们都可以从字面上理解,需要注意的是 upgradeneeded 方法,我们后续所有的操作都在这里进行。

打开在 Chrome 的控制台中输入上面的代码,可以看到触发了 onupgradeneededonsuccess 事件,并且创建了数据库。

根据打印的顺序我们可以知道打开数据库触发的事件顺序如下:

对象存储的创建

在上面我们创建完了库,那么现在就要来创建对象存储(表)了。请记住,创建对象存储只能在 upgradeneeded 中进行操作,并且当我们要增加对象存储时,一定要在 open 方法中更新版本号。因为版本号不更新的话,IndexedDB 是不会触发 upgradeneeded 事件的。

我们通过 createObjectStore 方法进行对象存储的创建。这个方法接受两个参数,分别为 nameoptions,其中 name 为对象存储名,options 为配置项用来设置主键等。

var open = indexedDB.open('db1', 2)

open.onupgradeneeded = function(e){
  console.log('触发了 upgradeneeded 事件')
  var db = e.target.result
  db.createObjectStore('Person')
}

open.onsuccess = function(e){
  console.log('触发了 success 事件')
  console.log(e)
}

open.onerror = function(e){
  console.log('触发了 error 事件')
  console.log(e)
}

我们利用之前的代码,在 onupgradeneed 中增加 createObjectStore 方法创建了一个 Person 对象存储(注意,这里在 open 时更新了版本)。在 Chrome 的控制体中执行代码后,可以在 Application 面板中看到 Person 已经被创建出来了。

需要注意的是,如果已经有对象存储存在的话,再执行 createObjStore 方法创建同名的对象存储时,浏览器会报错。

因此,为了防止这一错误,我们可以在创建前使用 objectStoreNames.contains 方法来进行检测。修改后的 onupgradeneeded 代码如下。

var open = indexedDB.open('db1', 4)

open.onupgradeneeded = function(e){
  console.log('触发了 upgradeneeded 事件')
  var db = e.target.result
  if(!db.objectStoreNames.contains('Person')){
    console.log('创建新的对象存储')
    db.createObjectStore('Person')
  }
}

本教程图文或视频等内容版权归侠课岛所有,任何机构、媒体、网站或个人未经本网协议授权不得转载、转贴或以其他方式复制发布或发表。

评价

19

本课评分:
  •     非常好
难易程度:
  •     适中的
|
教程
粉丝
主页

签到有礼

已签到2天,连续签到7天即可领取7天全站VIP

  • 1
    +2 金币
  • 2
    +3 金币
  • 3
    +5 金币
  • 6
    +7 金币
  • 5
    +6 金币
  • 4
    暖心福利
    自选分类VIP ×1天
  • 7
    惊喜大礼

    自选分类VIP ×3天 +20金币
  • 持续签到 +8 金币

金币可以用来做什么?