IndexedDB快速入门

IndexedDB概述

为什么要用IndexedDB?

1.大量数据储存在客户端，这样可以减少从服务器获取数据的次数，直接从本地获取数据。
2.现有的浏览器数据储存方案，都不适合储存大量数据：
Cookie 的大小不超过4KB，且每次请求都会发送回服务器
LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同）
...

IndexedDB是什么？

1.IndexedDB 就是浏览器提供的本地数据库
2.IndexedDB 允许储存大量数据（一般来说不少于 250MB），提供各种API，功能强大。
3.异步操作，防止大量数据的读写导致拖慢网页的现象

indexedDB对象

1.数据库

名为databaseName的数据库

2.对象仓库：每个数据库包含若干个对象仓库。它类似于关系型数据库的表格。
3.数据记录：对象仓库保存的是数据记录。
4.索引：为了加速数据的检索，可以在对象仓库里面，为不同的属性建立索引。
5.事务：数据记录的读写和删改，都要通过事务完成。
6.指针

名为person的仓库对象

api的基本使用

1.打开数据库：indexedDB.open()

IndexedDB.open()方法返回一个 IDBRequest 对象。这个对象通过三种事件error、success、upgradeneeded，处理打开数据库的操作结果
打开数据库的执行顺序：
数据库存在 ? error/ success : upgradeneeded => error/ success

 // 1.打开数据库
    openDB () {
      return new Promise((resolve, reject) => {
        let db
        const request = this.indexedDB.open('databaseName', 1) // 事务对象  databaseName:数据库的名字 version:数据库的版本
        request.onsuccess = function (event) {
          db = event.target.result // 数据库对象
          console.log('数据库打开成功')
          resolve(db)
        }

        request.onerror = function (event) {
          console.log('数据库打开报错')
        }

        request.onupgradeneeded = function (event) { // 数据库创建或升级的时候会触发
          console.log('onupgradeneeded')
        }
      })
    },

2.新建/升级数据库：upgradeneeded 事件

request.onupgradeneeded = function (event) { // 数据库创建或升级的时候会触发
          console.log('onupgradeneeded')
          db = event.target.result // 数据库对象
          var objectStore
          if (!db.objectStoreNames.contains('person')) {
            objectStore = db.createObjectStore('person', { keyPath: 'id' }) // 创建表
            // objectStore = db.createObjectStore('person', { autoIncrement: true }) // 创建表
            objectStore.createIndex('name', 'name', { unique: false }) // 创建索引 可以让你搜索任意字段
            objectStore.createIndex('address', 'address', { unique: false })
            objectStore.createIndex('nameAddr', ['name', 'address'], { unique: false })
            objectStore.createIndex('flag', 'flag', { unique: false })
          }
        }

(1)objectStore = db.createObjectStore('person', { keyPath: 'id' })新建对象仓库（即新建表），主键（key）是默认建立索引的属性，比如，数据记录是{ id: 1, name: '张三' }，那么id属性可以作为主键
(2)objectStore = db.createObjectStore('person', { autoIncrement: true })新建对象仓库（即新建表），数据记录里面没有合适作为主键的属性，那么可以让 IndexedDB 自动生成主键
(3)objectStore.createIndex('flag', 'flag', { unique: false })创建索引，可以让你搜索任意字段;三个参数分别为索引名称、索引所在的属性、配置对象（说明该属性是否包含重复的值）

3.新增数据：add()

// 2.新增数据 db：数据库实例 storename：仓库名称 data：数据
    addData (db, storename, data) {
      var request = db.transaction([storename], 'readwrite') // 事务对象 指定表格名称和操作模式（"只读"或"读写"）
        .objectStore(storename) // 仓库对象
        .add(data)

      request.onsuccess = function (event) {
        console.log('数据写入成功')
      }

      request.onerror = function (event) {
        console.log('数据写入失败')
        throw new Error(event.target.error)
      }
    },

(1)db.transaction([storename], 'readwrite')新建时必须指定表格名称和操作模式（"只读"或"读写"）。

4.查询数据

(1)主键读取数据
读取数据也是通过事务完成。
下边代码中，objectStore.get()方法用于读取数据，参数是主键的值。

// 3.通过主键读取数据 storename：表名称 key 主键值
    getDataByKey: function (db, storename, key) {
      return new Promise((resolve, reject) => {
        var transaction = db.transaction([storename]) // 事务
        var objectStore = transaction.objectStore(storename) // 仓库对象
        var request = objectStore.get(key)

        request.onerror = function (event) {
          console.log('事务失败')
        }

        request.onsuccess = function (event) {
          console.log('主键查询结果: ', request.result)
          resolve(request.result)
        }
      })
    },

(2)游标查询记录，遍历数据
遍历数据表格的所有记录，要使用指针对象 IDBCursor。
下面代码中，新建指针对象的openCursor()方法是一个异步操作，所以要监听success事件。

// 4.通过游标查询记录 db 数据库实例  storename 仓库/表名称
    cursorGetData: function (db, storename) {
      let list = []
      var store = db.transaction(storename, 'readwrite') // 事务
        .objectStore(storename) // 仓库对象
      var request = store.openCursor() // 指针对象
      request.onsuccess = function (e) {
        var cursor = e.target.result
        if (cursor) { // 必须要检查
          list.push(cursor.value)
          cursor.continue()// 遍历了存储对象中的所有内容
        } else {
          console.log('游标查询结果：', list)
        }
      }
    },

(3)索引读取数据
可以通过索引意义搜索任意字段，也就是说从任意字段拿到数据记录。如果不建立索引，默认只能搜索主键。
假定新建表格的时候，对indexName字段建立了索引。

 getDataByIndex: function (db, storename, indexName, indexValue) {
      var store = db.transaction(storename, 'readwrite') // 事务
        .objectStore(storename) // 仓库对象
      var request = store.index(indexName) // 索引对象
        .get(indexValue)
      request.onerror = function () {
        console.log('事务失败')
      }
      request.onsuccess = function (e) {
        var result = e.target.result
        console.log('索引查询结果：', result)
      }
    },

(4)索引游标查询记录
与索引查询的区别：
索引查询：查询满足条件的第一条数据
索引和游标查询：满足条件的所有数据

// 6.通过索引游标查询记录  db:数据库实例 storename 仓库/表名称  indexName：索引名  indexValue：索引值
    cursorGetDataByIndex: function (db, storename, indexName, indexValue) {
      let list = []
      var store = db.transaction(storename, 'readwrite').objectStore(storename) // 仓库对象
      var request = store.index(indexName) // 索引对象
        .openCursor(IDBKeyRange.only(indexValue)) // 指针对象
      request.onsuccess = function (e) {
        var cursor = e.target.result
        if (cursor) { // 必须要检查
          list.push(cursor.value)
          cursor.continue()// 遍历了存储对象中的所有内容
        } else {
          console.log('游标索引查询结果：', list)
        }
      }
      request.onerror = function (e) {
      }
    }

5.更新数据

put()方法根据主键自动更新相应数据记录

// 7.更新数据 db：数据库实例 tableName：表名称 data：数据
    updateData: function (db, storename, data) {
      var request = db.transaction([storename], 'readwrite') // 事务对象
        .objectStore(storename) // 仓库对象
        .put(data)

      request.onsuccess = function () {
        console.log('数据更新成功')
      }

      request.onerror = function () {
        console.log('数据更新失败')
      }
    },

6.删除数据

(1)主键删除
IDBObjectStore.delete()方法用于删除记录

// 8.删除数据 db：数据库实例 tableName：表名称 id：主键值
    deleteData: function (db, storename, id) {
      var request = db.transaction([storename], 'readwrite') // 事务
        .objectStore(storename) // 仓库对象
        .delete(id)

      request.onsuccess = function () {
        console.log('数据删除成功')
      }

      request.onerror = function () {
        console.log('数据删除失败')
      }
    },

（2）索引和游标删除指定的数据
匹配到满足条件的数据后，cursor.delete()方法用于删除数据记录

 // 9.通过索引和游标删除指定的数据 db:数据库实例  storename:表名称   indexName：索引名  indexValue：索引值
    cursorDeleteData: function (db, storename, indexName, indexValue) {
      var store = db.transaction(storename, 'readwrite').objectStore(storename) // 仓库对象
      var request = store.index(indexName) // 索引对象
        .openCursor(IDBKeyRange.only(indexValue)) // 指针对象
      request.onsuccess = function (e) {
        var cursor = e.target.result
        var deleteRequest
        if (cursor) {
          deleteRequest = cursor.delete()// 请求删除当前项
          deleteRequest.onerror = function () {
            console.log('游标删除该记录失败')
          }
          deleteRequest.onsuccess = function () {
            console.log('游标删除该记录成功')
          }
          cursor.continue()
        }
      }
      request.onerror = function (e) {
      }
    },

7.关闭数据库

 // 10.关闭数据库 db：数据库实例
    closeDB: function (db) {
      db.close()
      console.log('数据库已关闭')
    },

8.删除数据库

注意要先关闭数据库再删除，否则删除失败

// 11.删除数据库 dbname：数据库名称
    deletedb: function () {
      var self = this
      let deleteRequest = self.indexedDB.deleteDatabase('databaseName')
      deleteRequest.onerror = function (event) {
        console.log('删除失败')
      }
      deleteRequest.onsuccess = function (event) {
        console.log('删除成功')
      }
    },

小结

1.了解基本概念
2.API灵活使用
掌握这些就基本上掌握了IndexedDB的基本使用啦