简析Html5中的indexedDB

[Hyrmm]

1、indexedDB

• HTML5新增了一种被称为indexedDB的数据库，该数据库是一种存储在客户端本地的NoSQL数据库，用于在本地存储大量数据。目前主流浏览器的最新版本都对其提供了支持。
• indexedDB是一个“对象数据库”，而不是“关系数据库”，它相对于传统的关系数据库（如MySQL、SQL Server等）来说，功能简化了很多，但是已经足够满足实际开发需求了。

2、操作数据库

2.1 创建数据库

在HTML5中，我们使用indexedDB对象的open()方法来创建或者打开一个数据库。

语法

var request = window.indexedDB.open(数据库名, 版本号);
request.onerror = function(){
  console.log("创建或打开数据库失败！");
};
request.onsuccess = function(e){
  console.log("创建或打开数据库成功！");
};
//indexedDB是windows的一个子对象
//如果数据库不存在,open()会创建一个新数据库
//数据库名:该参数为数据库名称
//版本号:改参数可任意填写
//indexedDB.open() 会返回一个请求对象 该对象有俩个事件onerror,onsuccess
//onerror打开数据库失败触发的事件,onsuccess打开数据库成功触发的事件

2.2 打开数据库

• 在成功打开数据,onsuccess事件的e.target.result获取的是一个IDBDatabase对象,通过IDBDatabase对象我们可以获得数据库的各种信息。
• 其中数据库的增删查改操作，都是基于这个对象(IDBDatabase)。

语法:

var request = window.indexedDB.open(数据库名, 版本号);
request.onerror = function(){
  console.log("创建或打开数据库失败！");
};
request.onsuccess = function(e){
  console.log("创建或打开数据库成功！");
  var db=e.target.result;
  console.log(db)
};

输出结果:

控制台查看结果:

2.3删除数据库

• 在HTML5中，我们可以使用indexedDB对象的deleteDatabase()方法来删除数据库。

语法:

var request = window.indexedDB.deleteDatabase(数据库名);
request.onerror = function(){
  console.log("删除数据库失败！");
};
request.onsuccess = function(e){
  console.log("删除数据库成功！");
};
//同样indexedDB.deleteDatabase会返回一个请求对象,俩个事件,onsuccess,onerror

3、操作对象仓库

• 接触过SQL的小伙伴都知道，创建了数据库后，接着肯定就是创建一个“表”来存储数据。但是在indexedDB中，是没有“表”这个概念的，而是用“对象仓库（Object Store）”来代替。在indexedDB中，一个对象仓库就是一张表。
• 在indexedDB中，我们可以使用IDBDatabase对象的createObjectStore()方法来创建一个新的对象仓库。

语法：

var request = window.indexedDB.open(数据库名, 版本号);
request.onerror = function(){
  console.log("创建或打开数据库失败！");
};
request.onsuccess = function(){
  console.log("创建或打开数据库成功！");
};
request.onupgradeneeded=function(e){
  var db = e.target.result;
  //如果数据库中不包含该对象仓库，则创建新的对象仓库
  if(!db.objectStoreNames.contains("对象仓库名")){
    var store = db.createObjectStore("对象仓库名",{keyPath:"主键名"});
    for(var i = 0 ; i < data.length;i++){
      var addRequest = store.add(data[i]);
      addRequest.onerror = function(){
        console.log("添加数据失败！")
      };
      addRequest.onsuccess = function(){
        console.log("添加数据成功！")
      };
    }
  }
};

分析:

• onupgradeneeded：它表示版本号更新时触发的事件。对于对象仓库的创建，我们一般都是在onupgradeneeded事件中操作的。
• IDBDatabase.createObjectStore:创建一个对象仓库;第一个参数是对象仓库名称，第二个参数是为对象仓库设置主键;如果让主键是一个递增的数字，可以使用：{autoIncrement:true}
• IDBDatabase.createObjectStore:对象仓库的创建会返回一个(ObjectStore)对象仓库对象
• keyPath:"主键名" 主键名可以是该对象仓库中每条对象的key的value
• IDBDatabase.objectStoreNames.contains:表示数据库中包含"对象仓库名"，返回值True或False
• ObjectStore.add(data[i]):给当前的(ObjectStore)对象仓库添加数据,同时返回一个request对象,request也有俩个事件,onsuccess;onerror。
• 再打开数据库时,更新版本号,以便触发onupgradeneeded事件，从而跟新数据库。

总结:

3.1 增删查改

3.1.1 增

在indexedDB中，我们可以使用事务的add()方法来为对象仓库增加数据。

语法：

request.onsuccess = function(e){
  console.log("创建或打开数据库成功！");
  var db = e.target.result;
  var transaction = db.transaction(["students"],"readwrite");
  var store = transaction.objectStore("students");
  for(var i = 0 ; i < data.length;i++){
    var dataRequest = store.add(data[i]);
    dataRequest.onerror = function(){
      console.log("添加数据失败！");
    };
    dataRequest.onsuccess = function(){
      console.log("添加数据成功！");
    };
  }
};

分析:

• 数据库的增删查改一般都在request的onsuccess事件中执行
• var transaction = db.transaction(["students"],"readwrite");通过IDBDatabase对象的transaction的方法为改数据库打开一个事务并且返回一个transaction对象。第一个参数为对象仓库的名称(是一个字符串数组)，第二参数是事务模式(read只读；readwrite读写)
• var store = transaction.objectStore("students");通过transaction对象打开指定对象仓库放回一个ObjectStore对象。做过通过ObjectStore.add()方法为对象仓库增加数据

3.1.2 删

在indexedDB中，我们可以使用事务的delete()方法来删除对象仓库的数据。

request.onsuccess = function(e){
  console.log("创建或打开数据库成功！");
  var db = e.target.result;
  var transaction = db.transaction(["students"],"readwrite");
  var store = transaction.objectStore("students");
  var dataRequest = store.delete(1001);
  dataRequest.onerror = function(){
    console.log("删除数据失败！");
  };
  dataRequest.onsuccess = function(){
    console.log("删除数据成功！");
  };
};

分析:

• var dataRequest = store.delete(1001);通过调用ObjectStore对象的delete方法输出某条数据。只有一个参数，这个参数就是主键名称

3.1.3 查

在indexedDB中，我们可以使用事务的get()方法来查询对象仓库的数据。

说明:

var dataRequest = store.get(1002);同样是利用ObjectStore对象的get方法查找数据 .只有一个参数,该参数为主键名

3.3.4 改

在indexedDB中，我们可以使用事务的put()方法来更新对象仓库的数据。

说明:

var dataRequest = store.put(value);调用ObjectStore对象的put方法为对象仓库改数据.唯一参数value,需要更改数据,测试发现会更改主键相同的数据.（你的主键名若为数据某个键值,那么put就会用的很便利)

• author:hyrm

• dateTime:2021-04-13

• aside:今天天气不错,下午出去打了个篮球,更多的劳逸结合带来了更持久的专注力，更顺通的思路。