浏览器数据库 IndexedDB 介绍

在讲IndexedDB之前，先简单说说cookie、localStorage、sessionStorage。

cookie

Cookie 的大小不超过4KB，且每次请求都会发送回服务器。

localStorage

LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。

sessionStorage

sessionStorage 与 localStorage 的接口类似，但保存数据的生命周期与 localStorage 不同。 Session 这个词的意思，直译过来是“会话”。它只是可以将一部分数据在当前会话中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage 中的数据就会被清空。

在开始之前，我们先简单梳理一下浏览器存储的几种方式异同

	会话期 Cookie	持久性 Cookie	sessionStorage	localStorage	IndexedDB
存储大小	4kb	4kb	2.5~10 MB	2.5~10 MB	>250MB
失效时间	浏览器关闭自动清除	设置过期时间，到期后清除	浏览器关闭后清除	永久保存（除非手动清除）	手动更新或删除
与服务端交互	有	有	无	无	无
访问策略	符合同源策略可以访问	符合同源策略可以访问	符合同源策略可以访问	即使同源也不可相互访问	符合同源策略可以访问
同步/异步	同步	同步	同步	同步	异步

 接下来就开始重头戏了 —— IndexedDB

IndexedDB

随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。

通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。

操作步骤

查看更多API

基本步骤：

• 创建/打开数据库，并开始一个事务
• 在数据库中创建一个对象仓库（object store）
• 启动一个事务，并发送一个请求来执行一些数据库操作，增删改查
• 通过监听正确类型的 DOM 事件以等待操作完成
• 在操作结果上进行一些操作（可以在 request 对象中找到）

 打开数据库

/** 
   * 打开数据库 
  */
  public openDB () {
    this.db  = null;
    this.request = window.indexedDB.open("testDatabase");
    this.request.onerror = function(event: any) {
      // 错误处理
      console.log('打开数据库报错');
    };
    this.request.onsuccess = function(event: any) {
      // 成功处理
      this.db = event.target.result;
      console.log('打开数据库成功');
    };
  }

创建和更新数据库版本号

如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded。

public onupgradeneededDB() {
    this.request.onupgradeneeded = function (event: any) {
      this.db = event.target.result;
    }
  }

新建数据库

新建数据库与打开数据库是同一个操作。如果指定的数据库不存在，就会新建。不同之处在于，后续的操作主要在upgradeneeded事件的监听函数里面完成，因为这时版本从无到有，所以会触发这个事件。

通常，新建数据库以后，第一件事是新建对象仓库（即新建表）。

/** 
   * 新建数据库 
  */
  public createDB() {
    this.request.onupgradeneeded = function(event: any) {
      this.db = event.target.result;
      let objectStore: any = null;
      if (!this.db.objectStoreNames.contains('emList')) {
        objectStore = this.db.createObjectStore('emList', { keyPath: 'id' });
        // 新建对象仓库以后，下一步可以新建索引。
        objectStore.createIndex('name', 'name', { unique: false });
        objectStore.createIndex('email', 'email', { unique: true });
      }
    }
  }

创建一张叫emList的表格，主键是id。

写入数据

新增数据指的是向对象仓库写入数据记录。这需要通过事务完成。

未完待续！