indexedDB使用指南

基本概念

IndexedDB是一种在浏览器中持久存储数据的方法，允许我们不考虑网络可用性，创建具有丰富查询能力的可离线web应用程序。indexedDB对于存储大量数据的应用程序和不需要持久internet链接的应用程序（例如邮件客户端、待办事项列或记事本）很有用

几条重要的概念（需熟知）

首先IndexedDB是一个key-value型数据库，可以使用一个key作为索引获取或者存储数据
IndexedDB是事务模式的数据库。
其次IndexedDB是一种异步API
IndexedDB是面向对象的。要求我们为一种数据创建一个对象仓库（objectStore），只要这种数据是一个js对象即可。

5 . IndexedDB支持同源策略。

基本模式

IndexedDB 鼓励使用的基本模式如下所示：

打开数据库
在数据库中创建一个对象仓库（object store）
启动一个事务，并发送一个请求来执行数据库操作，如增加或提取数据等
通过监听正确类型的dom事件以等待操作完成
在操作结果是进行一些操作

生成和构建一个对象存储空间

打开数据库

let request = window.indexedDB.open('mydatabase');

如果数据库不存在，上述命令会创建该数据库。然后会触发onupgradneeded事件。

成功/失败处理函数

request.onerror = event => {
        // do something
        alert("打开本地indexedDB存储失败")
}

request.onsucess = event => {
      // do something
      db = event.target.result;
}

浏览器会在任意给定的web app首次尝试打开一个indexedDB存储时对用户进行提醒。用户可以选择允许访问或者拒绝访问。在浏览器的隐私模式下indexedDB是被完全禁止的。

创建和更新数据库版本号

当创建一个新的数据库或者增加已经存在的数据库版本号时，onupgrageneeded事件会被触发。

request.onupgradeneeded = event => {
    let db = event.target.result;
    // 为该数据库创建一个对象仓库
    let objStore = db.createObjectStore('name', {
        keyPath: 'myKey'
    });
}

// 假如说打开的是已经存在的数据库，那么触发的是onsuccess函数

构建数据库

每当一个值被存储斤一个对象存储空间时，它会被和一个键相关联。键的提供有以下几种不同方法：

image.png

// 我们的客户数据看起来像这样。
const customerData = [
  { ssn: "444-44-4444", name: "Bill", age: 35, email: "[email protected]" },
  { ssn: "555-55-5555", name: "Donna", age: 32, email: "[email protected]" }
];

request.onupgradeneeded = event => {
    let db = event.target.result;
    // 为该数据库创建一个对象仓库
    // 建立一个对象仓库来存储我们客户的相关信息，我们选择 ssn 作为键路径（key path）
    // 因为 ssn 可以保证是不重复的
    let objStore = db.createObjectStore('customers', {
        keyPath: 'ssn'
    });
    // 姓名不唯一
    objStore  = objStore.createIndex('name', 'name', { unique: false})
    // 邮箱唯一
    objStore  = objStore.createIndex('email', 'email', { unique: true})
}

事务操作

request.onupgradeneeded = event => {
    let db = event.target.result;
    // 为该数据库创建一个对象仓库
    // 建立一个对象仓库来存储我们客户的相关信息，我们选择 ssn 作为键路径（key path）
    // 因为 ssn 可以保证是不重复的
    let objStore = db.createObjectStore('customers', {
        keyPath: 'ssn'
    });
    objStore  = objStore.createIndex('name', 'name', { unique: false})
    objStore  = objStore.createIndex('email', 'email', { unique: true})

   // 事务采用readwrite模式
    objStore.transaction.oncomplete = event => {
            let customerObjStore = db.transaction ("customers", "readwrite").ObjectStore("customers");
            customerDate.forEach(customer => {
                  customerObjStore.add(customer);
            });
    }
}

增加、读取和删除数据

事务的三种模式：readonly，readwrite，versionchange

我们需要开启一个事务才能对创建的数据库进行操作。

versionchange：如果想要修改数据库模型或者接口，包括新建或者删除对象仓库或者索引，只能在versionchange事务中才能实现。
readonly：只读
readwrite：读写

新增数据

let transaction(["customers"], "readwirite");
// 在所有数据添加完毕后的处理
transaction.oncomplete = function(event) {
  alert("All done!");
};

transaction.onerror = function(event) {
  // 不要忘记错误处理！
};

let objectStore = transaction.objectStore("customers");
customerData.forEach(function(customer) {
  var request = objectStore.add(customer);
  request.onsuccess = function(event) {
    // event.target.result === customer.ssn;
  };
});

删除数据

let request = db.transaction(["customers"], "readwrite")
                .objectStore("customers")
                .delete("444-44-4444");
request.onsuccess = function(event) {
  // 删除成功！
};

获取数据

let transaction = db.transaction(["customers"]);
let objectStore = transaction.objectStore("customers");
let request = objectStore.get("444-44-4444");
request.onerror = function(event) {
  // 错误处理!
};
request.onsuccess = function(event) {
  // 对 request.result 做些操作！
  alert("Name for SSN 444-44-4444 is " + request.result.name);
};

更新数据库中的记录

let objectStore = db.transaction(["customers"], "readwrite").objectStore("customers");
var request = objectStore.get("444-44-4444");
request.onerror = function(event) {
  // 错误处理
};
request.onsuccess = function(event) {
  // 获取我们想要更新的数据
  var data = event.target.result;

  // 更新你想修改的数据
  data.age = 42;

  // 把更新过的对象放回数据库, put 方法进行更新
  let requestUpdate = objectStore.put(data);
   requestUpdate.onerror = function(event) {
     // 错误处理
   };
   requestUpdate.onsuccess = function(event) {
     // 完成，数据已更新！
   };
};

浏览器调试