indexedDB简单介绍

indexedDB

一、其它几种前端存储：

1、cookie

HTTP cookie 通常也叫作 cookie，最初用于在客户端存储会话信息。这个规范要求服务器在响应
HTTP 请求时，通过发送 Set-Cookie HTTP 头部包含会话信息。例如， 下面是包含这个头部的一个 HTTP
响应 :

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value

这个 HTTP 响应会设置一个名为"name"，值为"value"的 cookie。名和值在发送时都会经过 URL
编码。浏览器会存储这些会话信息，并在之后的每个请求中都会通过 HTTP 头部 cookie 再将它们发回服
务器，比如：

GET /index.jsl HTTP/1.1
Cookie: name=value
Other-header: other-header-value

这些发送回服务器的额外信息可用于唯一标识发送请求的客户端。

cookie 是与特定域绑定的。设置 cookie 后，它会与请求一起发送到创建它的域。这个限制能保证
cookie 中存储的信息只对被认可的接收者开放，不被其他域访问。因为 cookie 存储在客户端机器上，所以为保证它不会被恶意利用，浏览器会施加限制。 同时， cookie也不会占用太多磁盘空间。

cookie 在浏览器中是由以下参数构成的(这些参数在 Set-Cookie 头部中使用分号加空格隔开 ) :

• 名称：唯一标识 cookie 的名称。 cookie 名不区分大小写，因此 myCookie 和 MyCookie 是同一
  个名称。不过，实践中最好将 cookie 名当成区分大小写来对待，因为一些服务器软件可能这样
  对待它们。 cookie 名必须经过 URL 编码。
• 值：存储在 cookie 里的字符串值。这个值必须经过 URL 编码。
• 域： cookie 有效的域。发送到这个域的所有请求都会包含对应的 cookie。这个值可能包含子域（如
  www.wrox.com），也可以不包含（如.wrox.com 表示对 wrox.com 的所有子域都有效）。如果不明
  确设置，则默认为设置 cookie 的域。
• 路径：请求 URL 中包含这个路径才会把 cookie 发送到服务器。例如，可以指定 cookie 只能由
  http://www.wrox.com/books/访问，因此访问 http://www.wrox.com/下的页面就不会发送 cookie，即
  使请求的是同一个域。
• 过期时间：表示何时删除 cookie 的时间戳（即什么时间之后就不发送到服务器了）。默认情况下，
  浏览器会话结束后会删除所有 cookie。不过，也可以设置删除 cookie 的时间。这个值是 GMT 格
  式（ Wdy, DD-Mon-YYYY HH:MM:SS GMT），用于指定删除 cookie 的具体时间。这样即使关闭
  浏览器 cookie 也会保留在用户机器上。把过期时间设置为过去的时间会立即删除 cookie。
• 安全标志：设置之后，只在使用 SSL 安全连接的情况下才会把 cookie 发送到服务器。例如，请
  求https://www.wrox.com 会发送 cookie，而请求 http://www.wrox.com 则不会 ;

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com
Other-header: other-header-value

这个头部设置一个名为"name"的 cookie，这个 cookie 在 2007 年 1 月 22 日 7:10:24 过期，对
www.wrox.com 及其他 wrox.com 的子域（如 p2p.wrox.com）有效。
安全标志 secure 是 cookie 中唯一的非名/值对，只需一个 secure 就可以了。比如：
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value; domain=.wrox.com; path=/; secure
Other-header: other-header-value
这里创建的 cookie 对所有 wrox.com 的子域及该域中的所有页面有效（通过 path=/指定）。不过，
这个 cookie 只能在 SSL 连接上发送，因为设置了 secure 标志。
要知道，域、路径、过期时间和 secure 标志用于告诉浏览器什么情况下应该在请求中包含 cookie。
这些参数并不会随请求发送给服务器，实际发送的只有 cookie 的名/值对 ；

在 JavaScript 中处理 cookie 比较麻烦，因为接口过于简单，只有 BOM 的 document.cookie 属性。
根据用法不同，该属性的表现迥异。要使用该属性获取值时， document.cookie 返回包含页面中所有
有效 cookie 的字符串（根据域、路径、过期时间和安全设置），以分号分隔，如下面的例子所示：
name1=value1;name2=value2;name3=value3
所有名和值都是 URL 编码的，因此必须使用 decodeURIComponent()解码。
在设置值时，可以通过 document.cookie 属性设置新的 cookie 字符串。这个字符串在被解析后会
添加到原有 cookie 中。设置 document.cookie 不会覆盖之前存在的任何 cookie，除非设置了已有的
cookie。设置 cookie 的格式如下，与 Set-Cookie 头部的格式一样：
name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure
在所有这些参数中，只有 cookie 的名称和值是必需的。下面是个简单的例子：
document.cookie = "name=Nicholas";
这行代码会创建一个名为"name"的会话 cookie，其值为"Nicholas"。这个 cookie 在每次客户端向
服务器发送请求时都会被带上，在浏览器关闭时就会被删除。虽然这样直接设置也可以，因为不需要在
名称或值中编码任何字符，但最好还是使用 encodeURIComponent()对名称和值进行编码，比如：
document.cookie = encodeURIComponent("name") + "=" +
encodeURIComponent("Nicholas");
要为创建的 cookie 指定额外的信息，只要像 Set-Cookie 头部一样直接在后面追加相同格式的字
符串即可：
document.cookie = encodeURIComponent("name") + "=" +
encodeURIComponent("Nicholas") + "; domain=.wrox.com; path=/";

因为在 JavaScript 中读写 cookie 不是很直观，所以可以通过辅助函数来简化相应的操作。与 cookie
相关的基本操作有读、写和删除。这些在 CookieUtil 对象中表示如下：

class CookieUtil {
	static get(name) {
		let cookieName = `${encodeURIComponent(name)}=`,
		cookieStart = document.cookie.indexOf(cookieName),
		cookieValue = null;
		if (cookieStart > -1){
			let cookieEnd = document.cookie.indexOf(";", cookieStart);
			if (cookieEnd == -1){
				cookieEnd = document.cookie.length;
			}
			cookieValue = decodeURIComponent(document.cookie.substring(cookieStart
						+ cookieName.length, cookieEnd));
		}
		return cookieValue;
	}
	static set(name, value, expires, path, domain, secure) {
		let cookieText =`${encodeURIComponent(name)}=${encodeURIComponent(value)}`
		if (expires instanceof Date) {
			cookieText += `; expires=${expires.toGMTString()}`;
		}
		if (path) {
			cookieText += `; path=${path}`;
		}
		if (domain) {
			cookieText += `; domain=${domain}`;
		}
		if (secure) {
			cookieText += "; secure";
		}
		document.cookie = cookieText;
	}
	static unset(name, path, domain, secure) {
		CookieUtil.set(name, "", new Date(0), path, domain, secure);
	}
};

// 可以像下面这样使用这些方法：
// 设置 cookie
CookieUtil.set("name", "Nicholas");
CookieUtil.set("book", "Professional JavaScript");
// 读取 cookie
alert(CookieUtil.get("name")); // "Nicholas"
alert(CookieUtil.get("book")); // "Professional JavaScript"
// 删除 cookie
CookieUtil.unset("name");
CookieUtil.unset("book");
// 设置有路径、域和过期时间的 cookie
CookieUtil.set("name", "Nicholas", "/books/projs/", "www.wrox.com",
new Date("January 1, 2010"));
// 删除刚刚设置的 cookie
CookieUtil.unset("name", "/books/projs/", "www.wrox.com");
// 设置安全 cookie
CookieUtil.set("name", "Nicholas", null, null, null, true);
// 这些方法通过处理解析和 cookie 字符串构建，简化了使用 cookie 存储数据的操作

2、Storage

Web Storage 的定义了两个对象： localStorage 和 sessionStorage。 localStorage 是永久存储机制， sessionStorage 是跨会话的存储机制。这两种浏览器存储 API 提供了在浏览器中不受页面刷新影响而存储数据的两种方式。

Storage 类型用于保存名/值对数据，直至存储空间上限（由浏览器决定）。 Storage 的实例与其他
对象一样，但增加了以下方法 :

• clear()：删除所有值；不在 Firefox 中实现。
• getItem(name)：取得给定 name 的值
• key(index)：取得给定数值位置的名称
• removeItem(name)：删除给定 name 的名/值对
• setItem(name, value)：设置给定 name 的值。

sessionStorage:

因为 sessionStorage 对象是 Storage 的实例，所以可以通过使用 setItem()方法或直接给属
性赋值给它添加数据。下面是使用这两种方式的例子：
// 使用方法存储数据
sessionStorage.setItem("name", "Nicholas");
// 使用属性存储数据
sessionStorage.book = "Professional JavaScript";

可以使用 getItem()或直接访问属性名来取得。下面是使用这两种方式的例子：

// 使用方法取得数据
let name = sessionStorage.getItem("name");
// 使用属性取得数据
let book = sessionStorage.book;

可以结合 sessionStorage 的 length 属性和 key()方法遍历所有的值：

for (let i = 0, len = sessionStorage.length; i < len; i++){
	let key = sessionStorage.key(i);
	let value = sessionStorage.getItem(key);
	alert(`${key}=`${value}`);
}  

for (let key in sessionStorage){
	let value = sessionStorage.getItem(key);
	alert(`${key}=${value}`);
}

要从 sessionStorage 中删除数据，可以使用 delete 操作符直接删除对象属性，也可以使用
removeItem()方法。下面是使用这两种方式的例子：

// 使用 delete 删除值
delete sessionStorage.name;
// 使用方法删除值
sessionStorage.removeItem("book");

sessionStorage 对象应该主要用于存储只在会话期间有效的小块数据。如果需要跨会话持久存储
数据，可以使用 globalStorage 或 localStorage

存储在 localStorage 中的数据会保留到通过 JavaScript 删除或者用户清除浏览器缓存。 localStorage 数据不受页面刷新影响，也不会因关闭窗口、标签页或重新启动浏览器而丢失。

存储事件

每当 Storage 对象发生变化时，都会在文档上触发 storage 事件。使用属性或 setItem()设置
值、使用 delete 或 removeItem()删除值，以及每次调用 clear()时都会触发这个事件。这个事件的
事件对象有如下 4 个属性。

• domain：存储变化对应的域。

• key：被设置或删除的键。

• newValue：键被设置的新值，若键被删除则为 null。

• oldValue：键变化之前的值。

  可以使用如下代码监听 storage 事件：

  window.addEventListener("storage",(event) => 
       alert('Storage changed for ${event.domain}'
  ));
  

  对于 sessionStorage 和 localStorage 上的任何更改都会触发 storage 事件，但 storage 事
  件不会区分这两者。

二、indexedDB简介

IndexedDB和传统的关系型数据不同的是，它是一个key-value型的数据库。

value可以是复杂的结构体对象，key可以是对象的某些属性值也可以是其他的对象（包括二进制对象）。你可以使用对象中的任何属性做为index，以加快查找。

IndexedDB是自带transaction的，所有的数据库操作都会绑定到特定的事务上，并且这些事务是自动提交了，IndexedDB并不支持手动提交事务。

IndexedDB API大部分都是异步的，在使用异步方法的时候，API不会立马返回要查询的数据，而是返回一个callback。

异步API的本质是向数据库发送一个操作请求，当操作完成的时候，会收到一个DOM event，通过该event，我们会知道操作是否成功，并且获得操作的结果。

IndexedDB是一种 NoSQL 数据库，和关系型数据库不同的是，IndexedDB是面向对象的，它存储的是Javascript对象。

IndexedDB还有一个很重要的特点是其同源策略，每个源都会关联到不同的数据库集合，不同源是不允许访问其他源的数据库，从而保证了IndexedDB的安全性。

三、使用原因：开发者需要在本地进行永久存储

当我们进行一些较大的SPA页面开发时，我们会需要进行一些数据的本地存储。

当数据量不大时，我们可以通过SessionStorage或者LocalStorage来进行存储，但是当数据量较大，或符合一定的规范时，我们可以使用数据库来进行数据的存储。

在浏览器提供的数据库中，共有web sql和IndexedDB两种。相较于HTML5已经废弃的web sql来说，更推荐大家使用IndexedDB。

四、indexedDB的相关操作

// 假如一开始有这样的数据需要存储
let data = [
    {
        id: 1,
        name: "lzc",
        age: 18,
        sex: "man",
        addTime: "2021-2-1"
    },
    {
        id: 2,
        name: "cb",
        age: 19,
        sex: "man",
        addTime: "2021-2-2"
    },
    {
        id: 3,
        name: "kj",
        age: 20,
        sex: "woman",
        addTime: "2021-2-3"
    },
    {
        id: 4,
        name: "juanjuan",
        age: 21,
        sex: "woman",
        addTime: "2021-2-4"
    }
]

1、创建或者打开数据库

/*
不同的浏览器对于IndexedDB有不同的实现，正常来说，我们可以使用window.indexedDB来获取到浏览器的indexedDB对象。但是对于某些浏览器来说，还没有使用标准的window.indexedDB，而是用带前缀的实现

使用IndexedDB第一步，就是创建或打开一个数据库。我们使用window.indexedDB.open(DBName)这个API来打进行操作。
*/
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

if (!window.indexedDB) {
    console.log("Your browser doesn't support a stable version of IndexedDB. Such and such feature will not be available.");
} else {
    const request = window.indexedDB.open('people');

    request.onupgradeneeded = function (event) {

    }

    request.onsuccess = function(event) {
        console.log(request === event.target) // true
    }
    request.onerror = function(event) {
        
    }
}

• 调用此接口时，如果当前数据库不存在，则会创建一个新的数据库;
• 当数据库建立连接时，会返回一个IDBOpenDBRequest对象。
• 在连接建立成功时，会触发onsuccess事件，其中函数参数event的target属性就是request对象。
• 而在数据库创建或者版本更新时，会触发onupgradeneeded事件。

2、更新数据库版本号

window.indexedDB.open的第二个参数即为版本号。在不指定的情况下，默认版本号为1。

const request = window.indexedDB.open('people', 2);

在需要更新数据库的schema(模式)时，需要更新版本号。此时我们指定一个高于之前版本的版本号，就会触发onupgradeneeded事件。类似的，当此数据库不存在时，也会触发此事件并且将版本更新到置顶版本。

我们需要注意的是，版本号是一个Unsigned long long数字，这意味着它可以是一个非常大的整数。但是，它不能是一个小数，否则它将会被转为最近的整数，同时有可能导致onUpgradeneeded事件不触发(bug)。

3、存储空间操作

我们使用createObjectStore来创建一个存储空间。同时，使用createIndex来创建它的索引。

var request = window.indexedDB.open('people', 1);

request.onupgradeneeded = function (event) {
 console.log(request === event.target) // true
 var db = event.target.result;
 var objectStore = db.createObjectStore('user', {keyPath: 'id', autoIncrement: true});
	// 可以循环遍历，给对象数组或者对象的每个键都生成索引(每个索引里面的数据项的排序按索引的升序来排列，索引没有顺序可言，就按原始顺序)
	if (Object.prototype.toString.call(data) === "[object Array]" && data.length) {
     for (let i in data[0]) {
         objectStore.createIndex(i, i, { unique: false })
     }
 } else if (Object.prototype.toString.call(data) === "[object object]") {
     for (let i in data) {
         objectStore.createIndex(i, i, { unique: false })
     }
 }
}

request.onerror = function (event) {
 alert("Why didn't you allow my web app to use IndexedDB?!");
};

注：只能在onupgradeneeded回调函数中创建存储空间，而不能在数据库打开后的success回调函数中创建。

通过createObjectStore能够创建一个存储空间。接受两个参数：

1. 第一个参数，存储空间的名称，即我们上面的user。
2. 第二个参数，指定存储的keyPath值为存储对象的某个属性，这个属性能够在获取存储空间数据的时候当做key值使用。autoIncrement指定了key值是否自增（当key值为默认的从1开始到2^53的整时）。

而createIndex能够给当前的存储空间设置一个索引。它接受三个参数：

1. 第一个参数，索引的名称。
2. 第二个参数，指定根据存储数据的哪一个属性来构建索引。
3. 第三个属性， options对象，其中属性unique的值为true表示不允许索引值相等。

4、数据操作

1、事务transaction

在IndexedDB中，我们使用事务transaction来进行数据库的操作。事务有三个模式（常量已经弃用）

• readOnly：只读。
• readwrite：读写。
• versionchange：数据库版本变化。

我们创建一个事务时，需要从上面选择一种模式，如果不指定的话，则默认为只读模式。

const transaction = db.transaction(['user'], 'readwrite');

事务函数transaction的第一个参数为需要关联的存储空间，第二个可选参数为事务模式。与上面类似，事务成功时也会触发onsuccess函数，失败时触发onerror函数。

2、增加数据

当存储空间objectStore初始化完成后，我们可以把数据放入存储空间中。可以使用 add()或 put()写入数据。这两个方法都接收一个参数， 即要存储的对象，并把对象保存到对象存储。这两个方法只在对象存储中已存在同名的键时有区别。这 种情况下，add()会导致错误，而 put()会简单地重写该对象。

var request = window.indexedDB.open('people', 1);

request.onsuccess = function (event) {
    var db = event.target.result;

    var transaction = db.transaction(['user'], 'readwrite');

    var objectStore = transaction.objectStore('user');

    for (let item of data) {
        objectStore.add(item);
    }
}

注：add方法中的第二个参数key值是指定存储空间中的keyPath值，如果data中包含keyPath值或者此值为自增值，那么可以略去此参数。

// 1、createObjectStore第二个参数里加 { autoIncrement: true }，这个时候key使用从1开始的自增数，遍历出来的数据和原始要存储的数据顺序一致；

// 2、objectStore.add(item, item.name); 指定了keyPath值，这时候遍历出来的数据顺序，可能和原始的不一样，这里是按照keyPath值字母语序来排列的；这里写不写{ autoIncrement: true }都可以；

// 3、createObjectStore第二个参数里加 { keyPath: "name" }，这里不能再在objectStore.add(item)里面添加第二个参数，即使这里第二个参数添加的和createObjectStore里面的第二个参数的keyPath的一致；

上面的只影响user对象存储里面的排序，其它索引的排序只和自己的索引有关；

3、查找数据

1、通过特定值获取数据(只能获取单条数据)

• 这里默认只能获取通过createObjectStore的第二参数的keyPath设置的参数的user对象存储的数据，其它索引的无法查出；
• 或者使用index方法改变默认索引，比如let store = objectStore.index(“age”)，再用store.get(18)就可以通过age来查询了（前提是用createIndex创建了age索引的对象存储，才能使用objectStore.index(“age”)，才能查询）；

var request = window.indexedDB.open('people', 1);

request.onsuccess = function (event) {
    var db = event.target.result;

    var transaction = db.transaction(['user'], 'readwrite');

    var objectStore = transaction.objectStore('user');

    var request = objectStore.get(1);

    request.onsuccess = function (event) {
        //打印搜索的结果
        console.log(e.target.result);
    };

    request.onerror = function (event) {
        // 错误处理!
    };
}

2、通过游标获取数据(获取多条数据)

当你需要遍历整个存储空间中的数据时，你就需要使用到游标，与传统数据库查询不同，游标不会事先收集所有结果。相反，游标指向 第一个结果，并在接到指令前不会主动查找下一条数据

var request = window.indexedDB.open('people', 1);

request.onsuccess = function (event) {
    var db = event.target.result;

    var transaction = db.transaction(['user'], 'readwrite');

    var objectStore = transaction.objectStore('user');

    var request = objectStore.openCursor();

    request.onsuccess = function (event) {
        var cursor = event.target.result;
        if (cursor) {
            console.log(cursor.key, cursor.value);
            cursor.continue();
        }
    };

    request.onerror = function (event) {
        // 错误处理!
    };
}

使用游标时有一个需要注意的地方，当游标遍历整个存储空间但是并未找到给定条件的值时，仍然会触发onsuccess函数。

openCursor和openKeyCursor有两个参数：**openKeyCursor**遍历出来的值里面没有value对象值，其它和openCursor一致

1. 第一个参数(占位时可以使用null)，遍历范围，指定游标的访问范围。该范围通过一个IDBKeyRange参数的方法来获取。 遍历范围参数具体示例如下： ===>这种键范围只能比较其键能比较大小的对象存储或者only这种

// 匹配值 key === 1 
const singleKeyRange = IDBKeyRange.only(1);

// 匹配值 key >= 1，lowerBound用于设定结果集的下限，闭集
const lowerBoundKeyRange = IDBKeyRange.lowerBound(1);  

// 匹配值 key > 1，lowerBound用于设定结果集的下限，包含该值，设置第二个参数为true时，变为开集
const lowerBoundOpenKeyRange = IDBKeyRange.lowerBound(1, true); 

// 匹配值 key < 2，upperBound用于设定结果集的上限，包含该值，设置第二个参数为true时，变为开集
const upperBoundOpenKeyRange = IDBKeyRange.upperBound(2, true);

// 匹配值 key >= 1 && key < 2，指定一个左右范围
const boundKeyRange = IDBKeyRange.bound(1, 2, false, true);  

index.openCursor(boundKeyRange).onsuccess = function(event) {   
    const cursor = event.target.result;   
    if (cursor) {     
        // Do something with the matches.     
        cursor.continue();   
    } 
};  

2. 第二个参数，默认值是next，遍历顺序，指定游标遍历时的顺序和处理相同id（keyPath属性指定字段）重复时的处理方法。改范围通过特定的小写字符串（IDBCursor的常量已经弃用）来获取。其中：

• next，从前往后获取所有数据（重复值也会遍历出来）
• prev，从后往前获取所有数据（重复值也会遍历出来）
• nextunique，从前往后获取数据（重复数据只取第一条，索引重复即认为重复，下同）
• prevunique，从后往前获取数据（重复数据只取第一条）

var request = window.indexedDB.open('test', 1);

request.onsuccess = function (event) {
    var db = event.target.result;

    var transaction = db.transaction(['user'], 'readwrite');

    var objectStore = transaction.objectStore('user');

    var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound(1, false);
    var request = objectStore.openCursor(lowerBoundOpenKeyRange, "prev");

    request.onsuccess = function (event) {
        var cursor = event.target.result;
        if (cursor) {
            console.log(cursor.value);
            cursor.continue();
        }
    };

       request.onerror = function (event) {
        // 错误处理!
    };
}

4、使用索引

在前面构建数据库时，我们创建了所有的索引。现在我们也可以通过索引来进行数据检索。他的本质还是通过之前获取数据的API来进行，只是将原来使用的keyPath属性转换成为了索引指定的属性。

var request = window.indexedDB.open('test', 1);

request.onsuccess = function (event) {
 var db = event.target.result;

 var transaction = db.transaction(['user'], 'readwrite');

 var objectStore = transaction.objectStore('user');

 // 使用索引
 var index = objectStore.index('name');

 // 第一种，get方法
 index.get('a').onsuccess = function (event) {
     console.log(event.target.result);
 }

 // 第二种，普通游标方法
 index.openCursor().onsuccess = function (event) {
     console.log('openCursor:', event.target.result.value);
 }

 // 第三种，键游标方法，该方法与第二种的差别为：普通游标带有value值表示获取的数据，而键游标没有
 index.openKeyCursor().onsuccess = function (event) {
     console.log('openKeyCursor:', event.target.result.key);
 }
}

5、修改数据===>修改时，须带上这条数据的索引键

注：put方法不仅能够修改现有数据，也能够往存储空间中增加新的数据。

使用objectStore.put方法时，参数为已存在的键，即为修改，为不存在的键时，即为增加；

这里不能像查询一样，通过store.index()来修改索引，index上只有get方法

var transaction = db.transaction(['user'], 'readwrite');
var store = transaction.objectStore("user");

// 用put增加一条新数据
var request1 = store.put({
    id: 5,
    name: "李志聪",
    age: 22,
    sex: "man",
    addTime: "2021-2-5"
});

// 用put增加一条新数据，改sex描述===>是修改时，须带上这条数据的索引键
var request2 = store.put({
    id: 2,
    name: "lzc",
    age: 18,
    sex: "男",
    addTime: "2021-2-2"
});

request1.onsuccess = function (event) {

}

6、删除数据

var transaction = db.transaction(['user'], 'readwrite');
var store = transaction.objectStore("user");

var request = store.delete(对应某一条keyPath值);

request.onsuccess = function (event) {
    
}

7、关闭数据库

// 比如在destoryed钩子里面可以关闭数据库
db.close();

五、安全相关

IndexedDB也受到浏览器同源策略的限制。

六、dexie.js库的使用

dexie.js：A Minimalistic Wrapper for IndexedDB

基于indexDB的Dexie数据库

// 下面配一个简单的演示

// 创建一个数据库 若数据库已存在则为打开
// 打开数据库时，会判断当前version值是否大于已经存在的version值，若大于则会upgrade即升到最高版本
var db = new Dexie("mydb");

// 设定版本，添加一个person表，里面有自增的id主键，有name和age两个索引
// 注意：不要像在SQL中那样声明所有列。只声明要索引的属性，即要在where（…）查询中使用的属性。
db.version(1).stores({
    person: "++id, name, age"
})

// 增加(还是使用上面的数据进行存储)
for(let item of data) {
    db.person.add(item)
}

// 修改
setTimeout(() => {
    db.person.put({
        id: 2,
        name: "聪波",
        age: 18,
        sex: "boy",
        addTime: "2021-2-2"
    })
    console.log(db.person.get(2)) // 一个promise对象
    // 普通查询
    db.person.get(2).then(res => {
        console.log("查询的结果为===>", res)
    })
}, 1000)

// 带条件查询
setTimeout(() => {
    // adove、aboveOrEqual、below、belowOrEqual、between、equals
    db.person.where("age").aboveOrEqual(18).toArray().then(res => {
        console.log("年龄大于等于18岁的有===>", res)
    })
}, 2000)

// 删除
setTimeout(() => {
    // 删除第一条
    db.person.delete(1);
    db.person.get(1).then(res => {
        console.log("第一条数据===>", res)
    })
}, 3000)

setTimeout(() => {
    db.close();
    console.log("要是数据库没有关闭，下面将打印第三天数据");
    db.person.get(3).then(res => {
        console.log("第三条数据===>", res)
    })
}, 4000)