客户端持久化数据库---indexedDB使用

阅读目录一:什么是indexedDB数据库?二:IndexedDB数据库操作2.1打开或创建数据库2.2创建对象仓库(或叫创建表)2.3创建索引2....

客户端持久化数据库---indexedDB使用

阅读目录

  • 一:什么是indexedDB数据库?
  • 二:IndexedDB数据库操作
    2.1 打开或创建数据库
    2.2 创建对象仓库(或叫创建表)
    2.3 创建索引
    2.4 新增数据
    2.5 读取数据
    2.6 遍历数据
    2.7 更新数据
    2.8 删除数据
    2.9 使用索引
    2.10 清空所有的数据 clear() 方法
回到顶部

一:什么是indexedDB数据库?

indexedDB是浏览器中的事务类型对象存储数据库。indexedDB适合大量的结构的数据存储。

适用场景:当数据量不是很大的时候,我们可以使用sessionStorage或LocalStorage来进行存储,但是当数据量非常大的时候,我们需要使用本地数据库来存储,因此这个时候 indexedDB 浏览器数据库应运而生。

indexedDB 有如下特点:

1)异步的;indexedDB打开数据库或获取数据的时候都是异步的,也就是说它不会堵塞浏览器操作。异步就是为了防止大量数据的读写操作,防止网页变慢或卡顿。

2)键值对存储。indexedDB内部采用对象仓库(object store) 来存放数据的,所有类型的数据都可以直接存储。在对象仓库中,
数据以 "键值对" 的形式保存,每一个数据记录都有对应的主键,主键是不可重复的。

3)支持事务型的。indexedDB执行的操作会按照事务来分组的,在一个事务中,要么所有的操作都成功,要么所有的操作都失败。

4)同源限制。indexedDB有同源限制,每一个数据库只能在自身域名下能访问,不能跨域名访问。

5)存储空间大。存储空间可以达到几百兆甚至更多。

6)支持二进制存储。它不仅可以存储字符串,而且还可以存储二进制数据(ArrayBuffer对象或Blob对象)。

回到顶部

2.1 打开或创建数据库

使用indexedDB的第一步是打开我们的数据库,使用 indexedDB.open()方法,如下所示:

<!DOCTYPE html><html><head>  <title>indexedDB数据库使用</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"></head><body>  <script type="text/javascript"> var request = window.indexedDB.open('my-database', 1); console.log(request);  </script></body></html>

打印 如上的 信息,如下所示:

该方法接收2个参数,第一个参数是字符串,表示数据库的名字。如果指定的数据库不存在的话,就会新建该数据库。第二个参数是一个整数,它表示的是数据库的版本。如果省略第二个参数的话,如果是新建数据库的话,默认为1. 如果是打开已有的数据库的话,默认就为当前的版本。

数据库被创建完成后,我们可以打开我们的控制台 -> application -> indexedDB 下 就有 我们刚刚的 my-database 数据库了,如下所示:

从上面打印的信息我们可以看到,创建一个数据库完成后,该实列有 onerror, onsuccess, onupgradeneeded 监听函数。及 result 属性值。

indexedDB.open() 方法返回的是一个IDBRequest对象,代表一个请求连接数据库的请求对象。该对象通过三种事件:onerror、onsuccess、onupgradeneeded 处理打开数据库的操作结果的。我们可以通过监听请求对象的 onsuccess 和 onerror 事件来定义连接成功或失败需要执行的方法。如下代码:

var request = window.indexedDB.open('my-database');  var db;  request.onerror = function() { console.log('数据库打开报错');  }  request.onsuccess = function(event) { console.log(event.target); db = request.result; console.log('数据库打开成功');  }  request.onupgradeneeded = function(event) { console.log('数据库升级事件'); console.log(event.target); db = event.target.result;  }

如上代码执行的结果如下:

如上我们可以看到,会执行我们的 onsuccess的方法,但是 onupgradeneeded 是不会执行的,该监听函数只监听当当前的版本号升级的时候才会被触发,也就是说,数据库的版本号更改为大于当前的数据库的版本才会被执行。

注意:从上面我们也可以看到 event.target === request 实列对象.

当我们现在把数据库的版本号升级到2的时候,之前的版本号是1,现在数据库的版本升级了,就会触发 onupgradeneeded 事件,如下代码所示:

var request = window.indexedDB.open('my-database', 2);var db;request.onupgradeneeded = function(event) {  console.log('数据库升级事件');  console.log(event.target);  db = event.target.result;}

实现效果如下所示:

回到顶部

2.2 创建对象仓库(或叫创建表)

如上我们的indexedDB数据库新建完成后,我们现在要做的事情就行新建表格了。不过在indexedDB中没有数据库表,而叫对象仓库,不过它的作用就相当于一个数据库表。它使用的 createObjectStore 来创建的,如下代码演示:

var request = window.indexedDB.open('my-database', 3);var db;request.onupgradeneeded = function(event) {  db = event.target.result;  var store;  if (!db.objectStoreNames.contains('Users')) { store = db.createObjectStore('Users', {keyPath: 'id', autoIncrement: true });  }  console.log('创建对象仓库成功');  console.log(store);}

如上代码,db.createObjectStore 方法接收2个参数,第一个为对象的仓库名(也可以理解我们之前的数据库表名),第二个参数为可选参数,值为一个js对象,该对象中的 keyPath属性为主键,autoIncrement 属性为 true,表示主键值自增。

db.objectStoreNames.contains('Users') 的含义:是否包含该对象仓库名(或叫表名)。如果不包含就创建一个。

回到顶部

2.3 创建索引

在indexedDB中,我们使用 createIndex 来创建它的索引。通过数据对象的某个属性来创建索引,在数据库中进行检索数据的时候,我们只能通过被设置为索引的属性来进行检索的。

如下代码:

var request = window.indexedDB.open('my-database', 4);var db;request.onupgradeneeded = function(event) {  db = event.target.result;  var store;  if (!db.objectStoreNames.contains('newUsers')) { store = db.createObjectStore('newUsers', {keyPath: 'id', autoIncrement: true });  }  console.log(store);  // 创建索引  store.createIndex('userIndex', 'userName', { unique: false });  store.createIndex('userEmail', 'email', { unique: true });  console.log('创建索引成功');}

如上代码:store.createIndex 方法接收三个参数,第一个为索引名,第二个为数据对象的属性,第三个参数是可选参数,值为一个js对象,该对象中的 unique 属性值为true,代表该索引值是唯一的,不可以相同的。如果为false的话,则可以相同。

索引创建完成后,我们需要事务操作了。

回到顶部

2.4 新增数据

在indexedDB中,我们能够使用事务来进行数据库的操作,事务有三个模式。

1. readOnly: 只读
2. readwrite: 可读可写
3. versionchange: 数据库版本变化

我们创建一个事务时,需要选择一种模式,如果不指定的话,则默认为只读模式。比如代码如下:

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

创建事务我们使用 db.transaction方法。该方法接收2个参数,第一个参数是字符串或数组,字符串是一个对象的仓库名。数组则是由对象仓库名组成的数组。第二个参数是事务模式。比如上面的模式是只读,或 可读可写。

新增数据指的是向对象仓库写入数据记录,这需要通过事务完成。该方法接收一个参数,保存到对象仓库中的对象。
如下代码所示:

var request = window.indexedDB.open('my-database', 4);var db;request.onupgradeneeded = function(event) {  db = event.target.result;  var store;  if (!db.objectStoreNames.contains('newUsers')) { store = db.createObjectStore('newUsers', {keyPath: 'id', autoIncrement: true });  }  console.log(store);  // 创建索引  store.createIndex('userIndex', 'userName', { unique: false });  store.createIndex('userEmail', 'email', { unique: true });  c
源文地址:https://www.guoxiongfei.cn/cntech/21617.html