开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情

客户端存储方式indexedDB

提到浏览器的客户端存储。大家一定会在第一时间想到以下三种。

• cookie
• localStorage
• sessionStorage 这三种使用方便，api简单。在开发中被大量使用。

可能还有大部分人不知道。或者是知道没有实际使用过IndexedDB。今天我们就来浅试一下。

indexedDB介绍

他是一个浏览器存储结构化数据的方案。他是对已废弃的Web SQL DatabaseAPI的替代。他是完全异步的。

indexedDB 类似于传统数据库。不同带你在于。它使用对象存储。而不是表格。风格类似于NoSql

indexedDB使用

indexedDb建立对象存储

使用indexedDB.open() 传入要打开的数据库名字。打开或创建一个数据库。通过keyPath来制定键。open操作后会触发onupgradeneeded事件。制定升级版本号。也会触发onupgradeneeded 。可以在此事件处理中更新数据库模式。

let db;
let request = indexedDB.open("test")
request.onerror = (event) => {
    console.log(event.target.errorCode)
}
request.onsuccess = (event) => {
    db = event.target.result
}
request.onupgradeneeded = (event) => {
    const db = event.target.result
    db.createObjectStore("users",{keyPath:"userName"})
}

事务

事务是对象存储的引用

创建对象存储之后。其余的所有操作需要通过事务来完成。事务通过调用数据库对象的 transaction() 方法创建。该方法有两个入参。

• 第一个参数可传入一个或者多个要访问的对象存储的名称。多个用数组传入。
• 第二个参数通过三个字符串来控制食物对于对象存储的访问模式。 * "readonly" * "readwrite" * "versionchange"

如果不指定权限。则数据库中所有对象

let transaction = db.transaction("users","readwrite")

接下来，可以通过objectStore()方法传入对象存储的名称来访问特定的对象存储 。

• add 添加
• put 更新
• get 获取
• delete 删除
• clear 删除所有

let store = transaction.objectStore('users')

一个事务可以完成多个请求。事务本身也有事件处理程序

• onerror 整个事务被取消
• oncomplete 整个事务成功完成

插入对象

有了事务之后，就可以通过add和put写入数据了。

let req = store.add({"userName":"2",age:"2"})
req.onerror = ()=>{console.log('error')}
req.onsuccess = () =>{ console.log('success') }