浏览器数据库 IndexedDB 介绍

秒速五厘米 2022-10-22 09:12 169阅读 0赞

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

### cookie ###

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

### localStorage ###

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

### sessionStorage ###

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

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

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

接下来就开始重头戏了 **—— 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('打开数据库成功');
        };
      }

![2021032610473829.png][]

### 创建和更新数据库版本号 ###

如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件`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。

### 写入数据 ###

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

未完待续！

[API]: https://wangdoc.com/javascript/bom/indexeddb.html#indexeddb-%E5%AF%B9%E8%B1%A1
[2021032610473829.png]: /images/20221022/2478a3bc702c46d49d7890d5efc23ca7.png