当前位置：Gxlcms > 数据库问题 > html5本地存储（三）--- 本地数据库 indexedDB

html5本地存储（三）--- 本地数据库 indexedDB

时间：2021-07-01 10:21:17 帮助过：17人阅读

二、数据库的版本更新

　　成功连接数据库后，还应该创建相当于关系型数据库中的数据表的对象仓库（object store）与用于检索数据的索引（index）。

　　在使用indexexDB数据库时，所有对于数据的操作都在一个事务内部执行。

　　事务分为3种：只读事务、读写事务、与版本更新事务，这里主要展示版本更新事务

　使用onupgradeneeded事件来监听数据库连接的请求对象

示例代码如下

 1 <head>
 2     <meta charset="UTF-8"/>
 3     <title>更新数据库的版本</title>
 4     <script>
 5         window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 6         window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
 7         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 8         window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
 9 
10         function VersionUpdate() {
11         var dbName = ‘indexedDBTest‘; //数据库名
12         var dbVersion = 20170304; //版本号
13         var idb;
14         /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/
15         var dbConnect = indexedDB.open(dbName, dbVersion);
16             dbConnect.onsuccess = function(e) { //连接成功
17                 //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
18             idb = e.target.result;
19             alert(‘数据库连接成功‘);
20              };
21         dbConnect.onerror = function() {
22             alert(‘数据库连接失败‘);
23         };
24                 
25         dbConnect.onupgradeneeded = function(e) {
26             //数据库版本更新
27             //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
28             idb = e.target.result;
29             /*e.target.transaction属性值为一个IDBTransaction事务对象，此处代表版本更新事务*/
30             var tx = e.target.transaction;
31             //更新前的版本号
32             var oldVersion = e.oldVersion; 
33             //更新前的版本号
34             var newVersion = e.newVersion; 
35             alert(‘数据库版本更新成功,旧的版本号为‘ + oldVersion + ‘,新的版本号为‘ + newVersion);
36             /*
37              * 此处可执行创建对象仓库等处理
38              */
39         };
40         }
41     </script>
42 </head>
43 
44 <body>
45     <input type="button" value="数据库版本更新" onclick="VersionUpdate();" />
46 </body>

View Code

三、创建对象仓库

　　在indexexDb中，不能重复创建同名的对象仓库，否则会报错

　　在数据库的版本更新事务中，通过createObjectStore来创建对象，

var name = ‘Users‘;
var optionalParameters = {
    keyPath: ‘userId‘,
    autoIncrement: false
};
var store = idb.createObjectStore(name, optionalParameters);

该方法返回一个IDBObjectStore对象，该对象代表被创建成功的对象仓库。该对象接收2个参数，

第一个参数：字符串，代表对象仓库名；

第二个参数：可选参数，参数值为一个js对象，该对象的keyPath属性值用于指定对象仓库中该记录每一条记录使用哪个属性值来作为该记录的主键值。相关方法说明

1 keyPath：值用于指定每一条记录使用哪个属性值作为该记录的主键值，默认值为null。对象仓库中的每一条记录均为具有一个或者多个属性值的一个对象
2 
3 autoIncrement：布尔值。当值为true的时候，将主键指定为自增主键。当值为false的时候，则必须在添加数据记录时显示地指定主键值

View Code

示例代码如下

 1 <head>
 2     <meta charset="UTF-8"/>
 3     <title>创建对象仓库</title>
 4     <script>
 5     window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 6     window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
 7     window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 8     window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
 9 
10     function CreateObjectStore() {
11         var dbName = ‘indexedDBTest‘; //数据库名
12         var dbVersion = 20150305; //版本号
13         var idb;
14         /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/
15         var dbConnect = indexedDB.open(dbName, dbVersion);
16         dbConnect.onsuccess = function(e) { //连接成功
17         //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
18         idb = e.target.result;
19         alert(‘数据库连接成功‘);
20         };
21         dbConnect.onerror = function() {
22         alert(‘数据库连接失败‘);
23         };
24         dbConnect.onupgradeneeded = function(e) {
25         //数据库版本更新
26         //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
27         idb = e.target.result;
28         /*e.target.transaction属性值为一个IDBTransaction事务对象，此处代表版本更新事务*/
29         var tx = e.target.transaction;
30         var name = ‘Users‘;
31         var optionalParameters = {
32             keyPath: ‘userId‘,
33             autoIncrement: false
34         };
35         var store = idb.createObjectStore(name, optionalParameters);
36         alert(‘对象仓库创建成功‘);
37         /*
38          * 索引创建部分略，稍后详述
39          */
40         };
41     }
42     </script>
43 </head>
44 
45 <body>
46     <input type="button" value="创建对象仓库" onclick="CreateObjectStore();" />
47 </body>

View Code

四、创建索引

　　在关系型数据库中，可以针对非索引字段进行检索。而在indexexDB中，只能针对被设为索引的属性值进行检索，不能针对没有被设为索引的属性值进行检索

　　在数据库的版本更新事务中，在对象仓库创建成功后调用对象仓库的createIndex方法创建索引

var name = ‘userNameIndex‘;
var keyPath = ‘userName‘;
var optionalParameters = {
    unique: false,
    multiEntry: false
};

var idx = store.createIndex(name, keyPath, optionalParameters)

　　该方法接收3个参数，

第一个参数：字符串，代表索引名；

第二个参数：数据库仓库中记录对象的哪个属性来创建索引（索引名与属性名可以相同的）；

第三个参数：可选参数，参数值为js对象

示例代码如下

 1 <head>
 2     <meta charset="UTF-8" />
 3     <title>创建索引</title>
 4     <script>
 5     window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 6     window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
 7     window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 8     window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
 9 
10     function CreateIndex() {
11         var dbName = ‘indexedDBTest‘; //数据库名
12         var dbVersion = 20150306; //版本号
13         var idb;
14         /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/
15         var dbConnect = indexedDB.open(dbName, dbVersion);
16         dbConnect.onsuccess = function(e) { //连接成功
17             //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
18             idb = e.target.result;
19             alert(‘数据库连接成功‘);
20         };
21         dbConnect.onerror = function() {
22             alert(‘数据库连接失败‘);
23         };
24         dbConnect.onupgradeneeded = function(e) {
25             //数据库版本更新
26             //e.target.result为一个IDBDatabase对象，代表连接成功的数据库对象
27                     idb = e.target.result;
28             /*e.target.transaction属性值为一个IDBTransaction事务对象，此处代表版本更新事务*/
29             var tx = e.target.transaction;
30             var name = ‘newUsers‘;
31             var optionalParameters = {
32                 keyPath: ‘userId‘,
33                 autoIncrement: false
34             };
35             var store = idb.createObjectStore(name, optionalParameters);
36             alert(‘对象仓库创建成功‘);
37             var name = ‘userNameIndex‘;
38             var keyPath = ‘userName‘;
39             var optionalParameters = {
40                 unique: false,
41                 multiEntry: false
42             };
43 
44             var idx = store.createIndex(name, keyPath,optionalParameters);
45             alert(‘索引创建成功‘);
46         };
47     }
48 </script>
49 </head>
50 
51 <body>
52     <input type="button" value="创建索引" onclick="CreateIndex();" />
53 </body>
54

View Code

五、使用事务

　　数据库链接后，可以使用如下方法开启只读事务与读写事务

　　在indexedDB中，使用某个已建立连接的的数据库对象的transaction方法开启事务

 1 //事务名称1
 2 var storeNames = [‘Users‘];
 3 //只读事务
 4 var mode = "readonly";
 5 //读写事务
 6 //var mode = "readwrite";
 7         
 8 //idb为某个已连接数据库，开启事务
 9 var tx  = idb.transaction(storeNames , mode)
10 
11 //事务结束时所要执行的处理
12 tx.oncomplete = function(e){
13                 
14 }
15 //事务中止时所要执行的处理
16 tx.onabort = function(e){
17                 
18 }
19 /*
20  事务中的处理内容
21  * */
22             
23 //中止事务
24 tx.abort()

View Code

该方法有2个参数，

第一个参数：可以为由一些对象仓库名组成的一个字符串数组，用于定义事务的作用范围

第二个参数：为可选参数，用于定义事务的读写模式

6、保存数据

　　为了保存数据，首先连接某个indexedDB数据库，并且连接后使用该数据库的transaction方法开启一个读写事务，然后获取该事务对象，使用该对象仓库的put方法进行保存数据

示例代码

 1 <head>
 2     <title>向indexedDB数据库的对象仓库中保存数据</title>
 3     <script>
 4         window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 5         window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
 6         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 7         window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
 8 
 9         function SaveData() {
10             var dbName = ‘indexedDBTest‘; //数据库名
11             var dbVersion = 20150306; //版本号
12             var idb;
13             /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/
14             var dbConnect = indexedDB.open(dbName, dbVersion);
15             dbConnect.onsuccess = function(e) { //连接成功   
16                 idb = e.target.result; //引用IDBDatabase对象 
17                 var tx = idb.transaction([‘Users‘], "readwrite"); //开启事务
18                 var store = tx.objectStore(‘Users‘);
19                 console.log(store); //-> {IDBObjectStore}
20                 var value = {
21                     userId: 1,
22                     userName: ‘张三‘,
23                     address: ‘住址1‘
24                 };
25                 //保存数据
26                 var req = store.put(value);
27                 req.onsuccess = function(e) {
28                     alert("数据保存成功");
29                 };
30                 req.onerror = function(e) {
31                     alert("数据保存失败");
32                 };
33             };
34             dbConnect.onerror = function() {
35                 alert(‘数据库连接失败‘);
36             };
37         }
38     </script>
39 </head>
40 <body>
41     <input type="button" value="保存数据" onclick="SaveData();" />
42 </body>

View Code

7、获取数据

　　可以使用对象仓库的get方法从对象仓库中获取一条数据

var req = store.get(1)

示例源码

 1 <head>
 2     <title>从indexedDB数据库的对象仓库中获取数据</title>
 3     <meta charset="UTF-8"/>
 4     <script>
 5         window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 6         window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
 7         window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 8         window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
 9 
10         function GetData() {
11             var dbName = ‘indexedDBTest‘; //数据库名
12             var dbVersion = 20150306; //版本号
13             var idb;
14             /*连接数据库，dbConnect对象为一个IDBOpenDBRequest对象，代表数据库连接的请求对象*/
15             var dbConnect = indexedDB.open(dbName, dbVersion);
16             dbConnect.onsuccess = function(e) { //连接成功   
17                 idb = e.target.result; //引用IDBDatabase对象 
18                 var tx = idb.transaction([‘Users‘], "readonly");
19                 var store = tx.objectStore(‘Users‘);
20 
21                 var req = store.get(1);
22                 req.onsuccess = function() {
23                     if(this.result == undefined) {
24                         alert("没有符合条件的数据");
25                     } else {
26                         alert("获取数据成功,用户名为" + this.result.userName);
27                     }
28                 }
29                 req.onerror = function() {
30                     alert("获取数据失败");
31                 }
32             };
33             dbConnect.onerror = function() {
34                 alert(‘数据库连接失败‘);
35             };
36         }
37     </script>
38 </head>
39 
40 <body>
41     <input type="button" value="获取数据" onclick="GetData();" />
42 </body>

View Code

8、根据主键值检索数据

　　get方法只能获取到一条数据，要获取一批数据的时候，就需要使用indexedDB中的游标

　　通过对象仓库的openCursor方法创建并打开一个游标

var range = IDBKeyRange.bound(1,4);
var direction = "next";
var req = store.openCursor(range,direction);

该方法返回一个IDBRequest对象，代表一个向数据库发出检索数据的请求。该方法有两个参数

第一个参数：IDBKeyRange对象，对象的创建方法有bound(),only(),lowerBound(),upperBound(); 对应4个方法的详解如下

 1 bound方法使用示例
 2 var range = IDBKeyRange.bound(lower,upper,lowerOpen,upperOpen);
 3 
 4 该方法返回一批数据，由主键值组成的IDBKeyRange集合对象。该方法有4个参数：
 5 第一个参数：整数值，代表IDBKeyRange集合中的最小主键值
 6 第二个参数：整数值，代表IDBKeyRange集合中的最大主键值
 7 第三个参数：可选参数，布尔值，默认值为false。当值为false时，代表该集合对象中包含第一个参数中指定的最小主键值；当值为true时，代表该集合对象中排除最小主键值
 8 第四个参数：可选参数，布尔值，默认值为false。当值为false时，代表该集合对象中包含第二个参数中指定的最大主键值；当值为true时，代表该集合对象中排除最大主键值
 9 
10  
11 only方法使用示例
12 var range = IDBKeyRange.only(value);
13 
14 该方法返回一条数据，该方法有一个参数，整数值，代表该数据的主键值
15 
16  
17 
18 lowerBound方法使用示例
19 var range = IDBKeyRange.lowerBound(lower,lowerOpen);
20 
21 该方法返回一批数据。返回的所有数据的主键值均大于等于第一个参数。该方法有两个参数
22 第一个参数：整数值，代表该集合中的最小主键值
23 第二个参数：可选参数，布尔值，默认值为false。当值为false时，代表该集合对象中包含第一个参数指定的最小主键值；当值为true时，代表该集合对象中排除最小主键值
24 
25  
26 upperBound方法使用示例
27 var range = IDBKeyRange.lowerBound(upper,upperOpen);
28 
29 该方法返回一批数据，返回的所有数据的主键值均小于等于第一个参数。该方法有两个参数
30 第一个参数：整数值，代表该集合中的最小主键值
31 第二个参数：可选参数，布尔值，默认值为false。当值为false时，代表该集合对象中包含第一个参数指定的最大主键值；当值为true时，代表该集合对象中排除最大主键值

View Code

第二个参数：用于指定游标的读取方向，参数值有如下定义

next：数据按主键值升序排列，主键值相等的数据均被读取到游标中

nextunique：数据按主键值升序排列，主键值相等的数据只读取第一条数据

prev：数据按主键值降序排列，主键值相等的数据均被读取到游标中

prevunique:数据按主键值降序排列，主键值相等的数据只读取第一条数据

示例代码

 1 <head>
 2 <title>根据数据记录的主键值检索数据</title>
 3 <meta charset="UTF-8" />
 4 <script>
 5     window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
 6     window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
 7     window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
 8     window.IDBCursor = window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor;
 9     

                  

	 	
                    
                        
                            
                                < 上一篇
mysql和连接相关的timeout
                            
                            
                                 下一篇 >
如何安装Oracle Instant Client

人气教程排行

229次 1 oracle 用户解锁和修改用户密码

229次 2 解决：安装SQL Server 2008 Native Client遇到错误（在Navicat premium新建sqlserver连接时需要）：An error occurred during ...HRESULT: 0x80070422（注意尾部的错误号）

229次 3 rocksdb 编译步骤

229次 4 adb命令开关蓝牙及NFC

229次 5 解决数据库连接错误您在wp-config.php文件中提供的数据库用户名和密码可能不正确，或者无法连接到localhost上的数据库服务器，这意味着您的主机数据库服务器已停止工作。

229次 6 使用java自动填充，实现mysql的创建修改时间的自动填充

229次 7 Linux mount挂载磁盘报错 mount: wrong fs type, bad option, bad superblock on /dev/vdb

228次 8 关于mysql创建数据库中字符集和排序规则的选择

228次 9 Linux设置Mysql开机自启动服务

227次 10 SQL2008：WITH MOVE 子句可用于重新定位一个或多个文件

227次 11 图数据库Neo4j在GIS系统的应用

227次 12 SpringBoot配置 druid 数据源配置慢SQL记录

227次 13 SQL state [72000]; error code [1013]; ORA-03111: 通信通道收到中断; java.sql.SQLException: ORA-01745: 无效的主机/绑定变量名;java.sql.SQLException: ORA-01013: 用户请求取消当前的操作

227次 14 docker-compose启动MySQL并配置远程登录

225次 15 Mysql安装（for mac）

225次 16 kettle将图片转换至二进制存储至数据库

225次 17 adb的安装及配置

224次 18 使用PHP控制MODBUS-RTU设备

224次 19 MySQL 查询时间差值大于某一个值的记录

224次 20 MongoDB内存配置 --wiredTigerCacheSizeGB