IndexedDB的使用

IndexedDB 是一种低级API，用于客户端存储大量结构化数据(包括文件和blobs)。该API使用索引来实现对该数据的高性能搜索。IndexedDB 是一个运行在浏览器上的非关系型数据库。

既然是数据库了，那就不是 5M、10M 这样小打小闹级别了。理论上来说，IndexedDB 是没有存储上限的（一般来说不会小于 250M）。它不仅可以存储字符串，还可以存储二进制数据。

1、IndexedDB的特点

• 键值对储存

IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

• 异步

IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

• 支持事务

IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

• 同源限制

IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。

• 储存空间大

IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

• 支持二进制储存

IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）。

2、IndexedDB的常见操作

在IndexedDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求——响应的模式。

• 建立打开IndexedDB——window.indexedDB.open("testDB")

这条指令并不会返回一个DB对象的句柄，我们得到的是一个IDBOpenDBRequest对象，而我们希望得到的DB对象在其result属性中。

image

除了result，IDBOpenDBRequest接口定义了几个重要属性：

• onerror: 请求失败的回调函数句柄；

• onsuccess:请求成功的回调函数句柄；

• onupgradeneeded:请求数据库版本变化句柄。

<script>
  function openDB(name){
    var request = window.indexedDB.open(name) //  建立打开
    IndexedDBrequest.onerror = function (e){
      console.log('open indexdb error')
    }
    request.onsuccess = function (e){
      myDB.db = e.target.result // 这是一个 IDBDatabase对象，这就是IndexedDB对象
      console.log(myDB.db) // 此处就可以获取到db实例
    }
  }
  var myDB = {
      name: 'testDB',
      version:'1',
      db:null
  }
  openDB(myDB.name)
</script>

控制台得到一个 IDBDatabase对象，这就是IndexedDB对象：

image

• 关闭IndexedDB：

  function closeDB(db){ 
    db.close();
  }

• 删除IndexedDB：

  function deleteDB(name) {  
    indexedDB.deleteDatabase(name)
  }