客户端常用的存储方式(三)

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

IndexedDB

IndexedDB全称是Indexed Database API，用于浏览器中存储结构化数据的。

IndexedDB 是类似于MySQL的数据库， 区别是IndexedDB使用对象存储而不是表格保存数据，使用IndexedDB 数据库的第一步是调用 indexedDB.open()方法，并给它传入一个要打开的数据库名称，如果库已经存在，会发送一个打开它的请求，如果不存在，会创建并打开这个数据库的请求。

demo.js

let db, request, version = 1; 
request = indexedDB.open("manage", version); 
request.onerror = (event) => 
    console.log(`open: ${event.target.errorCode}`); 
request.onsuccess = (event) => { 
    db = event.target.result; 
};

建立了数据库连接之后，下一步就是使用对象存储,如果数据库版本与期待的不一致，那可能需要 创建对象存储。

demo.js

let test = {
    id: '001',
    username: "admin", 
    age: "17",
}

从上面的demo看出，id必须是全局唯一的，因为大多数情况下访问数据的凭据。这个键很重要，所以创建对象存储时必须指定一个键。

创建了对象存储之后，剩下的所有操作都是通过事务完成的，创建了对象存储之后，剩下的所有操作都是通过事务完成的。

创建事务demo.js

let transaction = db.transaction();

访问的对象存储的名称:

let transaction = db.transaction("username");

参数传入一个字符串数组：

let transaction = db.transaction(["username", "admin"]);

每个事务都以只读方式访问数据。要修改访问模式，可以传入第二个参数, 可以是"readonly"、"readwrite"或"versionchange"。

let transaction = db.transaction("username", "readwrite");

有了事务的引用，就可以使用 objectStore()方法并传入对象存储的名称以访问特定的对象存储。 然后，可以使用 add()和 put()方法添加和更新对象，使用 get()取得对象，使用 delete()删除对象， 使用 clear()删除所有对象。

事务对象本身也有事件处理程序：onerror 和 oncomplete。

transaction.onerror = (event) => { // 整个事务被取消 }; 
transaction.oncomplete = (event) => { // 整个事务成功完成 };

注意：不能通过 oncomplete 事件处理程序的 event 对象访问 get()请求返回的任何数据。

当我们拿到对象存储的引用，可以使用 add()或 put()写入数据，每次调用 add()或 put()都会创建对象存储的新更新请求，想验证请求成功与否，可以把请求对象保存到一个变量，添加 onerror 和 onsuccess 事件处理程序。