一文带你搞懂前端本地存储( 四 ) _前端本地存储

indexDBIndexedDB标准是HTML5官方认可的本地数据库解决方案。其目的不是取代服务器端数据库，它在一些特定场景下很有用,比如离线应用。IndexedDB是一种轻量级NOSQL数据库，是由浏览器自带。相比Web Sql更加高效，包括索引、事务处理和查询功能。

文章插图

从上图可以看出indexDB的兼容性还是不错的。
使用indexDB创建/打开一个数据库首先我们需要创建或者打开一个数据库对象，可以使用window.indexedDB.open()方法，示例如下：

var openRequest =window.indexedDB.open(name, version);var db;openRequest.onupgradeneeded = function(e) {  console.log("Upgrading...");}openRequest.onsuccess = function(e) {  console.log("Success!");  db = e.target.result;}openRequest.onerror = function(e) {  console.log("Error");  console.dir(e);}

第一次打开数据库时，会先触发upgradeneeded事件，然后触发success事件
open方法返回的是一个对象（IDBOpenDBRequest），回调函数定义在这个对象上面
回调函数接受一个事件对象event作为参数，它的target.result属性就指向打开的IndexedDB数据库
创建一个存放数据的“对象仓库”数据库对象有了，我们还需要创建一个存放数据的“对象仓库”，示例如下：
db.createObjectStore("test", { keyPath: "email" });db.createObjectStore("test2", { autoIncrement: true });

keyPath表示的是存储数据的键名，autoIncrement表示是否使用自动递增的整数作为键名。一般来说，两个属性有一个就可以了。

创建一个数据库事务对象transaction方法用于创建一个数据库事务。向数据库添加数据之前，必须先创建数据库务。
transaction方法返回一个事务对象，该对象的objectStore方法用于获取指定的对象仓库。
var transaction = db.transaction(["firstOS"],"readwrite");var store = transaction.objectStore("firstOS");transaction方法接受两个参数：
第一个参数是一个数组，里面是所涉及的对象仓库，通常是只有一个；
第二个参数是一个表示操作类型的字符串。readonly（只读）和readwrite（读写）;
transaction方法有三个事件，可以用来定义回调函数。
abort: 事务中断; complete: 事务完成; error: 事务出错。
transaction.oncomplete = function(event) { // some code};操作数据transaction对象提供了一些api，供我们操作数据。

添加数据 add()

获取对象仓库以后，就可以用add方法往里面添加数据了,示例如下:

var transaction = db.transaction(["firstOS"],"readwrite");var store = transaction.objectStore(“firstOS”);var data = {name: 'monkey'};var request = store.add(data,1);request.onerror = function(e) {   console.log("Error",[e.target.error.name](http://e.target.error.name));}request.onsuccess = function(e) {  console.log("数据添加成功！");}

add方法的第一个参数是所要添加的数据，第二个参数是这条数据对应的键名（key），上面代码将对象o的键名设为1 。如果在创建数据仓库时，对键名做了设置，这里也可以不指定键名。

更新数据 put()

var data = { name: 'monkeysoft' };var request = store.put(data);

读取数据 get()

var request = store.get(key);

删除数据 delete()

var request = store.delete(key);

清空数据库 clear()

var request = store.clear();

遍历数据 openCursor()

var request = store.openCursor();indexDB操作类封装以上就是我对前端本地存储的一些理解和整理，如有错，欢迎各位大佬指正，免得误人子弟~嘿嘿。
作者：monkeysoft
转发链接：https://mp.weixin.qq.com/s/74INx6HJ0N8RhF8red4FdQ

【一文带你搞懂前端本地存储】