着力选择,深刻解析HTML5中的IndexedDB索引数据库

indexedDB 基本采取

2017/12/14 · 基础技术 ·
1 评论 ·
IndexedDB

原稿出处:
党黎明   


indexedDB简介:

indexedDB
是一种接纳浏览器存储多量数目标方法.它成立的数额可以被询问,并且可以离线使用.

 

indexedDB 有以下特征:

  1. indexedDBWebSQL 数据库的取代品
  2. indexedDB安份守己同源协议(只好访问同域中储存的多寡,而不可以访问其余域的)
  3. API包含异步API同步API两种:多数场合下使用异步API;
    同步API必须同
    WebWorkers
    一起利用, 近来并未浏览器协助同步API
  4. indexedDB 是业务方式的数据库, 使用 key-value 键值对储存数据
  5. indexedDB 不选取结构化查询语言(SQL).
    它经过索引(index)所暴发的指针(cursor)来形成查询操作

indexedDB简介:indexedDB是一种选择浏览器存储大批量多少的方法.它创制的数量足以被询问,并且可以离线使用.indexedDB有以下特征:

介绍

IndexedDB就是多少个数据库
其最大的特征是:
行使对象保存数据,而不是运用表来保存数据,同时,它是异步的

深切解析HTML5中的IndexedDB索引数据库,html5indexeddb

那篇小说首要介绍了见解深刻解析HTML5中的IndexedDB索引数据库,包罗事务锁等基本效用的连带应用示例,需求的朋友可以参见下

介绍 IndexedDB是HTML5 WEB数据库,允许HTML5
WEB应用在用户浏览器端存储数据。对于利用来说IndexedDB极度有力、有用,可以在客户端的chrome,IE,Firefox等WEB浏览器中存储大量多少,上面简单介绍一下IndexedDB的基本概念。
 
什么是IndexedDB IndexedDB,HTML5新的数额存储,可以在客户端存储、操作数据,可以使应用加载地更快,更好地响应。它不一致于关系型数据库,拥有数据表、记录。它影响着大家设计和创建应用程序的主意。IndexedDB
创设有数据类型和总结的JavaScript持久对象的object,每一种object可以有目录,使其立竿见影地查询和遍历整个集合。本文为您提供了什么样在Web应用程序中运用IndexedDB的忠实事例。
 
开始 我们须要在执行前包蕴上边后置代码

JavaScript
Code复制内容到剪贴板

  1. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
      
  2.     
  3. //prefixes of window.IDB objects   
  4. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
      
  5. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
      
  6.     
  7. if (!indexedDB) {   
  8. alert(“Your browser doesn’t support a stable version of IndexedDB.”)
      
  9. }  

 
打开IndexedDB 在创设数据库以前,大家先是须求为数据库创造数量,假如大家有如下的用户新闻:

JavaScript
Code复制内容到剪贴板

  1. var userData = [   
  2. { id: “1”, name: “Tapas”, age: 33, email: “[email protected]” },
      
  3. { id: “2”, name: “Bidulata”, age: 55, email: “[email protected]” }
      
  4. ];  

未来大家必要用open()方法打开大家的数据库:

JavaScript
Code复制内容到剪贴板

  1. var db;   
  2. var request = indexedDB.open(“databaseName”, 1);   
  3.     
  4. request.onerror = function(e) {   
  5. console.log(“error: “, e);   
  6. };   
  7.     
  8. request.onsuccess = function(e) {   
  9. db = request.result;   
  10. console.log(“success: “+ db);   
  11. };   
  12. request.onupgradeneeded = function(e) {   
  13.     
  14. }  

如上所示,我们已经开辟了名为”databaseName”,钦赐版本号的数据库,open()方法有七个参数:
1.率先个参数是数据库名称,它会检测名称为”databaseName”的数据库是不是早已存在,纵然存在则打开它,否则创立新的数据库。
2.次之个参数是数据库的版本,用于用户更新数据库结构。
 
onSuccess处理 发出成功事件时“onSuccess”被触发,若是全体成功的伸手都在此处理,大家得以因此赋值给db变量保存请求的结果供未来使用。
 
onerror的处理程序 发出错误事件时“onerror”被触发,若是打开数据库的经过中惜败。
 
Onupgradeneeded处理程序 假如你想翻新数据库(创立,删除或改动数据库),那么你必须贯彻onupgradeneeded处理程序,使您可以在数据库中做其余改变。
在“onupgradeneeded”处理程序中是可以转移数据库的构造的绝无仅有地点。
 
创建和添加数据到表:
IndexedDB使用对象存储来存储数据,而不是透过表。
每当1个值存储在目标存储中,它与多少个键相关联。
它同意大家创建的任何对象存储索引。
索引允许大家走访存储在指标存储中的值。
下边的代码突显了哪些创设对象存储并插入预先准备好的数据:

JavaScript
Code复制内容到剪贴板

  1. request.onupgradeneeded = function(event) {   
  2. var objectStore = event.target.result.createObjectStore(“users”, {keyPath: “id”});
      
  3. for (var i in userData) {   
  4. objectStore.add(userData[i]);    
  5. }   
  6. }  

咱俩选择createObjectStore()方法成立二个对象存储。 此方法接受多个参数:

  • 仓储的称谓和参数对象。
    在此间,我们有一个名为”users”的目的存储,并定义了keyPath,那是目标唯一性的习性。
    在那边,大家采纳“id”作为keyPath,那些值在对象存储中是唯一的,大家务必确保该“ID”的性质在对象存储中的逐个对象中留存。
    一旦创造了对象存储,大家能够伊始选取for循环添加数据进去。
     
    手动将数据拉长到表:
    咱俩得以手动添加额外的数码到数据库中。

JavaScript
Code复制内容到剪贴板

  1. function Add() {   
  2. var request = db.transaction([“users”], “readwrite”).objectStore(“users”)
      
  3. .add({ id: “3”, name: “Gautam”, age: 30, email: “[email protected]” });
      
  4.     
  5. request.onsuccess = function(e) {   
  6. alert(“Gautam has been added to the database.”);   
  7. };   
  8.     
  9. request.onerror = function(e) {   
  10. alert(“Unable to add the information.”);    
  11. }   
  12.     
  13. }  

前边我们在数据库中做其他的CRUD操作(读,写,修改),必须选择工作。
该transaction()方法是用来指定我们想要进行事务处理的对象存储。
transaction()方法接受三个参数(第四个和第⑩个是可选的)。
第四个是我们要拍卖的对象存储的列表,第②个内定大家是或不是要只读/读写,第多少个是本子变化。
 
从表中读取数据 get()方法用于从目的存储中搜索数据。
我们之前早已设置对象的id作为的keyPath,所以get()方法将追寻具有同样id值的目的。
上边的代码将重回大家命名为“Bidulata”的对象:

JavaScript
Code复制内容到剪贴板

  1. function Read() {   
  2. var objectStore = db.transaction([“users”]).objectStore(“users”);
      
  3. var request = objectStore.get(“2”);   
  4. request.onerror = function(event) {   
  5. alert(“Unable to retrieve data from database!”);   
  6. };   
  7. request.onsuccess = function(event) {    
  8. if(request.result) {   
  9. alert(“Name: ” + request.result.name + “, Age: ” + request.result.age + “, Email: ” + request.result.email);
      
  10. } else {   
  11. alert(“Bidulata couldn’t be found in your database!”);    
  12. }   
  13. };   
  14. }  

 
从表中读取全数数据
下边的形式寻找表中的全数数据。
那里我们使用游标来探寻对象存储中的全体数据:

JavaScript
Code复制内容到剪贴板

  1. function ReadAll() {   
  2. var objectStore = db.transaction(“users”).objectStore(“users”); 
      
  3. var req = objectStore.openCursor();   
  4. req.onsuccess = function(event) {   
  5. db.close();   
  6. var res = event.target.result;   
  7. if (res) {   
  8. alert(“Key ” + res.key + ” is ” + res.value.name + “, Age: ” + res.value.age + “, Email: ” + res.value.email);
      
  9. res.continue();   
  10. }   
  11. };   
  12. req.onerror = function (e) {   
  13. console.log(“Error Getting: “, e);   
  14. };    
  15. }  

该openCursor()用于遍历数据库中的多少个记录。
在continue()函数中两次三番读取下一条记下。
删去表中的笔录 上面的点子从目标中去除记录。

JavaScript
Code复制内容到剪贴板

  1. function Remove() {    
  2. var request = db.transaction([“users”], “readwrite”).objectStore(“users”).delete(“1”);
      
  3. request.onsuccess = function(event) {   
  4. alert(“Tapas’s entry has been removed from your database.”);   
  5. };   
  6. }  

大家要将目的的keyPath作为参数传递给delete()方法。
 
着力选择,深刻解析HTML5中的IndexedDB索引数据库。说到底代码
上面的法子从目标源中删除一条记下:

JavaScript
Code复制内容到剪贴板

  1. <!DOCTYPE html>  
  2. <head>  
  3. <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />  
  4. <title>IndexedDB</title>  
  5. <script type=”text/javascript”>  
  6. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
      
  7.     
  8. //prefixes of window.IDB objects   
  9. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
      
  10. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
      
  11.     
  12. if (!indexedDB) {   
  13. alert(“Your browser doesn’t support a stable version of IndexedDB.”)
      
  14. }   
  15. var customerData = [   
  16. { id: “1”, name: “Tapas”, age: 33, email: “[email protected]” },
      
  17. { id: “2”, name: “Bidulata”, age: 55, email: “[email protected]” }
      
  18. ];   
  19. var db;   
  20. var request = indexedDB.open(“newDatabase”, 1);   
  21.     
  22. request.onerror = function(e) {   
  23. console.log(“error: “, e);   
  24. };   
  25.     
  26. request.onsuccess = function(e) {   
  27. db = request.result;   
  28. console.log(“success: “+ db);   
  29. };   
  30.     
  31. request.onupgradeneeded = function(event) {   
  32.     
  33. }   
  34. request.onupgradeneeded = function(event) {   
  35. var objectStore = event.target.result.createObjectStore(“users”, {keyPath: “id”});
      
  36. for (var i in userData) {   
  37. objectStore.add(userData[i]);    
  38. }   
  39. }   
  40. function Add() {   
  41. var request = db.transaction([“users”], “readwrite”)
      
  42. .objectStore(“users”)   
  43. .add({ id: “3”, name: “Gautam”, age: 30, email: “[email protected]” });
      
  44.     
  45. request.onsuccess = function(e) {   
  46. alert(“Gautam has been added to the database.”);   
  47. };   
  48.     
  49. request.onerror = function(e) {   
  50. alert(“Unable to add the information.”);    
  51. }   
  52.     
  53. }   
  54. function Read() {   
  55. var objectStore = db.transaction(“users”).objectStore(“users”);
      
  56. var request = objectStore.get(“2”);   
  57. request.onerror = function(event) {   
  58. alert(“Unable to retrieve data from database!”);   
  59. };   
  60. request.onsuccess = function(event) {    
  61. if(request.result) {   
  62. alert(“Name: ” + request.result.name + “, Age: ” + request.result.age + “, Email: ” + request.result.email);
      
  63. } else {   
  64. alert(“Bidulata couldn’t be found in your database!”);    
  65. }   
  66. };   
  67. }   
  68. function ReadAll() {   
  69. var objectStore = db.transaction(“users”).objectStore(“users”); 
      
  70. var req = objectStore.openCursor();   
  71. req.onsuccess = function(event) {   
  72. db.close();   
  73. var res = event.target.result;   
  74. if (res) {   
  75. alert(“Key ” + res.key + ” is ” + res.value.name + “, Age: ” + res.value.age + “, Email: ” + res.value.email);
      
  76. res.continue();   
  77. }   
  78. };   
  79. req.onerror = function (e) {   
  80. console.log(“Error Getting: “, e);   
  81. };    
  82. }   
  83. function Remove() {    
  84. var request = db.transaction([“users”], “readwrite”).objectStore(“users”).delete(“1”);
      
  85. request.onsuccess = function(event) {   
  86. alert(“Tapas’s entry has been removed from your database.”);   
  87. };   
  88. }   
  89. </script>  
  90. </head>  
  91.     
  92. <body>  
  93. <button onclick=”Add()”>Add record</button>  
  94. <button onclick=”Remove()”>Delete record</button>  
  95. <button onclick=”Read()”>Retrieve single record</button>  
  96. <button onclick=”ReadAll()”>Retrieve all records</button>  
  97. </body>  
  98. </html>  

localStorage是不带lock效能的。那么要促成前端的数目共享并且必要lock功用这就须要运用任何本储存形式,比如indexedDB。indededDB使用的是事务处理的体制,那实在就是lock作用。
  做这么些测试须要先不难的包装下indexedDB的操作,因为indexedDB的连日比较麻烦,而且三个测试页面都亟需用到

JavaScript
Code复制内容到剪贴板

  1. //db.js   
  2. //封装事务操作   
  3. IDBDatabase.prototype.doTransaction=function(f){   
  4.   f(this.transaction([皇家赌场手机版,”Obj”],”readwrite”).objectStore(“Obj”));   
  5. };   
  6. //连接数据库,成功后调用main函数   
  7. (function(){   
  8.   //打开数据库   
  9.   var cn=indexedDB.open(“TestDB”,1);   
  10.   //创制数量对象   
  11.   cn.onupgradeneeded=function(e){   
  12.     e.target.result.createObjectStore(“Obj”);   
  13.   };   
  14.   //数据库连接成功   
  15.   cn.onsuccess=function(e){   
  16.     main(e.target.result);   
  17.   };   
  18. })();   
  19.   接着是五个测试页面   
  20. <script src=”db.js”></script>  
  21. <script>  
  22. //a.html   
  23. function main(e){   
  24.   (function callee(){   
  25.     //起头二个作业   
  26.     e.doTransaction(function(e){   
  27.       e.put(1,”test”); //设置test的值为1   
  28.       e.put(2,”test”); //设置test的值为2   
  29.     });   
  30.     setTimeout(callee);   
  31.   })();   
  32. };   
  33. </script>  
  34. <script src=”db.js”></script>  
  35. <script>  
  36. //b.html   
  37. function main(e){   
  38.   (function callee(){   
  39.     //起初一个事务   
  40.     e.doTransaction(function(e){   
  41.       //获取test的值   
  42.       e.get(“test”).onsuccess=function(e){   
  43.         console.log(e.target.result);   
  44.       };   
  45.     });   
  46.     setTimeout(callee);   
  47.   })();   
  48. };   
  49. </script>  

把localStorage换来了indexedDB事务处理。不过结果就不一致

皇家赌场手机版 1

测试的时候b.html中只怕不会立马有出口,因为indexedDB正忙着处理a.html东西,b.html事务丢在了业务丢队列中等待。可是无论怎么样,输出结果也不会是1那一个值。因为indexedDB的蝇头处理单位是事情,而不是localStorage那样以表达式为单位。那样如若把lock和unlock之间需求处理的事物放入贰个业务中即可落成。别的,浏览器对indexedDB的支撑不如localStorage,所以使用时还得考虑浏览器包容。

这篇小说首要介绍了见解深刻解析HTML5中的IndexedDB索引数据库,包蕴事务锁等基本功用的有关使…

一 、使用indexedDB的基本形式

  1. 开拓数据库并且初始五个政工。
  2. 创办一个 objecStore
  3. 打造3个伸手来执行一些数据库操作,像增添或提取数额等。
  4. 通过监听正确类型的 DOM 事件以伺机操作已毕。
  5. 在操作结果上进行一些操作(可以在 request 对象中找到)

indexedDB是WebSQL数据库的取代品

采纳形式

贰 、创设、打开数据库

indexedDB 存在于全局对象window上, 它最根本的2个格局就是open办法,
该方法接收两个参数:

  • dbName // 数据库名称 [string]
  • version // 数据库版本 [整型number]

var DB_NAME = ‘indexedDB-test’, VERSION = 1, db; var request =
indexedDB.open(DB_NAME, VE酷路泽SION); request.onsuccess = function(event) {
db = event.target.result; // console.log(event.target === request); //
true db.onsuccess = function(event) { console.log(‘数据库操作成功!’); };
db.onerror = function(event) { console.error(‘数据库操作发生错误!’,
event.target.errorCode); }; console.log(‘打开数据库成功!’); };
request.onerror = function(event) { console.error(‘创造数据库出错’);
console.error(‘error code:’, event.target.errorCode); };
request.onupgradeneeded = function(event) { // 更新目的存储空间和目录
…. };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var DB_NAME = ‘indexedDB-test’, VERSION = 1, db;
var request = indexedDB.open(DB_NAME, VERSION);
request.onsuccess = function(event) {
    db = event.target.result;
    // console.log(event.target === request); // true
    db.onsuccess = function(event) {
        console.log(‘数据库操作成功!’);
    };
    db.onerror = function(event) {
        console.error(‘数据库操作发生错误!’, event.target.errorCode);
    };
    console.log(‘打开数据库成功!’);
};
request.onerror = function(event) {
    console.error(‘创建数据库出错’);
    console.error(‘error code:’, event.target.errorCode);
};
request.onupgradeneeded = function(event) {
   // 更新对象存储空间和索引 ….
};

若是本域下不存在名为DB_NAME的数据库,则上述代码会创建三个名为DB_NAME、版本号为VERSION的数据库;
触发的轩然大波依次为: upgradeneededsuccess.

假使已存在名为DB_NAME的数据库, 则上述代码会打开该数据库;
只接触success/error事件,不会触发upgradeneeded事件.
db是对该数据库的引用.

indexedDB遵守同源协议(只可以访问同域中存储的多寡,而无法访问其余域的)

老是数据库

要动用它必须先打开,通过 indexDB.open(name, version)办法打开三个数据库

  • name : 表示数据要开拓的数据库的称呼
  • version:为开辟数据库的版本号

③ 、创建对象存储空间和目录

在关系型数据库(如mysql)中,八个数据库中会有多张表,每张表某个的主键、索引等;

key-value型数据库(如indexedDB)中,
三个数据库会有多少个目的存储空间,各个存储空间有友好的主键、索引等;

创设对象存储空间的操作一般位于成立数据库成功回调里:

request.onupgradeneeded = function(event) { // 更新目的存储空间和目录
…. var database = event.target.result; var objectStore =
database.createObjectStore(“movies”, { keyPath: “id” });
objectStore.createIndex(‘alt’, ‘alt’, { unique: true });
objectStore.createIndex(‘title’, ‘title’, { unique: false }); };

1
2
3
4
5
6
request.onupgradeneeded = function(event) { // 更新对象存储空间和索引 ….
    var database = event.target.result;
    var objectStore = database.createObjectStore("movies", { keyPath: "id" });
    objectStore.createIndex(‘alt’, ‘alt’, { unique: true });
    objectStore.createIndex(‘title’, ‘title’, { unique: false });
};

皇家赌场手机版 2

onupgradeneeded
是大家唯一可以修改数据库结构的地点。在那里面,咱们得以创设和删除对象存储空间以及营造和删除索引。

在数据库对象database上,有以下办法可供调用:

  1. createObjectStore(storeName, configObj) 创立1个目的存储空间
    • storeName // 对象存储空间的名称 [string]
    • configObj // 该目的存储空间的配备 [object]
      (其中的keyPath属性值,标志对象的该属性值唯一)
  2. createIndex(indexName, objAttr, configObj) 创造一个索引
    • indexName // 索引名称 [string]
    • objAttr // 对象的脾气名 [string]
    • configObj // 该索引的布置对象 [object]

API包含着力选择,深刻解析HTML5中的IndexedDB索引数据库。异步API同步API三种:多数气象下使用异步API;同步API必须同WebWorkers一起使用,
方今一贯不浏览器接济同步API

indexDB.open()措施的规律

分成二种状态:
1. 传出的数据库不设有
当传入的数据库不存在时,该方法就会创立一个名为name的数据库,并打开它,此时,会先触发upgradeneeded事件;调用该函数会再次回到一个IDBRequest对象,可以在该目的上添加onsuccess事件onerror事件
注意:当打开1个不设有的数据库时会触发upgradeneeded事件,那是触发该事件的一种途径,为啥会触发该事件呢?该事件有哪些功用?留个难点在这儿,等会解答。

2. 传来的数据库存在
此间分为二种情景:

  • 当传入的数据库存在,且version版本号与即将打开的数据库版本号也同样
    则平素打开该数据库,如果成功,则会接触onsuccess事件,败北则触发onerror事件
    注意:那里并不会触发upgradeneeded事件,为啥?留个问号

  • 当传入的数据库存在,不过传入的version版本号高于即将打开的数据库的本子号
    则平昔打开该数据库,同时触发upgradeneeded事件,然后再接触onsuccess事件onerror事件,那里也接触了onupdateneeded事件

④ 、增添和删除数据

对数据库的操作(增删查改等)都必要通过事务来完成,事务怀有三种形式:

  • readonly 只读(可以并发进行,优先使用)
  • readwrite 读写
  • versionchange 版本更改

indexedDB是业务情势的数据库, 使用key-value键值对储存数据

upgradeneeded事件

触发该事件的条件:当打开的数据库不设有,大概传播的数据库版本version高于当前版本,则会触发该事件

upgradeneeded事件的效率:当打开了贰个数据库之后,要求开发3个名为:目的存储空间
的实物(可以领会为多少就是存放在那几个空间里面,二个数据库可以创制七个目标存储空间),而
对象存储空间 只能在upgradeneeded事件的处理函数中开创

利用时,注意以下三种情状:

  1. 当大家率先次打开创造数据库时,会接触upgradeneeded事件,大家就须要在中间成立对象存储空间

  2. 当大家对数据库版本进行更新时,也会触发该事件,那时可以在此创造新的靶子存储空间,原来的对象存储空间依旧存在

注意:若果要求对目标存储空间拓展改动,那么只好先将积存在它其中的数量读取出来,再将其除去,然后拔取新的选项去创立它,再写入原来的数额

开辟数据库并创建对象存储空间的代码:

// 对于该API,各浏览器还未同一,所以需要对一些接口添加前缀
window.indexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB;
window.IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE: "readwrite"};
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange;
window.IDBCursor = window.IDBCursor || window.webkitIDBTransaction;

// 判断浏览器是否支持IndexedDB
if (!window.indexedDB) {
window.alert("Your browser doesn't support a stable version of IndexedDB.")
}

var request , db;
// 打开或创建 名为dbName的数据库
request = window.indexedDB.open('dbName', 2)
request.onsuccess = function (event) {
   db = event.target.result;
}

request.onerror = function (event) {
   console.log('错误代码: ' + event.target.errorCode);
}

request.onupgradeneeded = function(event) {
  db = event.target.result;  // 
  // 创建一个   对象存储空间,名为customers
  var objectStore = db.createObjectStore('customers', {keyPath: 'ssn'});
  // 对于某些数据,可以为一个对象存储空间指定多个键。比如,若要通过用户ID 和用户名 两种方式来保存用户资料,就需要通过两个键来存取记录
  // 因此可以使用createIndex,名字是有可能重复的,所以其unique 设置为 false ;第一个name是索引的名字,该名字是索引的名字,第二个name是索引的属性的名字,该名字要与对象中的属性相同
  objectStore.createIndex('name', 'name', { unique: false});

  // 创建一个email的索引,该email是独特的,所以 unique 设置为 true
  objectStore.createIndex('email', 'email', { unique: true});
}

向数据库中加进数量

面前提到,扩展数据必要通过事务事务的利用办法如下:

var transaction = db.transaction([‘movies’], ‘readwrite’);
transaction.oncomplete = function(event) { console.log(‘事务完毕!’); };
transaction.onerror = function(event) { console.log(‘事务失利!’,
event.target.errorCode); }; transaction.onabort = function(event) {
console.log(‘事务回滚!’); };

1
2
3
4
5
6
7
8
9
10
var transaction = db.transaction([‘movies’], ‘readwrite’);
transaction.oncomplete = function(event) {
    console.log(‘事务完成!’);
};
transaction.onerror = function(event) {
    console.log(‘事务失败!’, event.target.errorCode);
};
transaction.onabort = function(event) {
    console.log(‘事务回滚!’);
};

皇家赌场手机版 3数据库对象的transaction()艺术接收四个参数:

  • storeNames //
    对象存储空间,可以是目的存储空间名称的数组,也可以是单个对象存储空间名称,必传
    [array|string]
  • mode // 事务格局,上边提到的两种之一,可选,暗许值是readonly
    [string]

如此那般,我们赢得二个事情对象transaction, 有两种事件可能会被触发:
complete, error, abort.
未来,大家因此工作向数据库indexedDB-test
对象存储空间movies中插入数据:

var objectStore = transaction.objectStore(‘movies’); // 指定对象存储空间
var data = [{ “title”: “寻梦环游记”, “year”: “2017”, “alt”:
“”, “id”: “20495023” }, {
“title”: “你在哪”, “year”: “2016”, “alt”:
“”, “id”: “26639033” }, {
“title”: “笔仙咒怨”, “year”: “2017”, “alt”:
“”, “id”: “27054612” }];
data.forEach(function(item, index){ var request = objectStore.add(item);
request.onsuccess = function(event) { console.log(‘插入成功!’, index);
console.log(event.target.result, item.id); //
add()方法调用成功后result是被增进的值的键(id) }; });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
var objectStore = transaction.objectStore(‘movies’);  // 指定对象存储空间
var data = [{
  "title": "寻梦环游记",
  "year": "2017",
  "alt": "https://movie.douban.com/subject/20495023/",
  "id": "20495023"
}, {
  "title": "你在哪",
  "year": "2016",
  "alt": "https://movie.douban.com/subject/26639033/",
  "id": "26639033"
}, {
  "title": "笔仙咒怨",
  "year": "2017",
  "alt": "https://movie.douban.com/subject/27054612/",
  "id": "27054612"
}];
data.forEach(function(item, index){
    var request = objectStore.add(item);
    request.onsuccess = function(event) {
        console.log(‘插入成功!’, index);
        console.log(event.target.result, item.id); // add()方法调用成功后result是被添加的值的键(id)
    };
});

皇家赌场手机版 4

通过业务对象transaction,在objectStore()艺术中指定对象存储空间,就赢得了可以对该对象存储空间拓展操作的目的objectStore.

向数据库中增加数量,add()办法增添的目的,要是数据库中已存在同样的主键,或然唯一性索引的键值重复,则该条数据不会插入进去;

增添多少还有3个办法: put(),
使用方法和add()差距之处在于,数据库中若存在同样主键或许唯一性索引重复,则会更新该条数据,否则插入新数据。

indexedDB不使用结构化查询语言(SQL).
它经过索引(index)所暴发的指针(cursor)来形成查询操作

储存数据

仓储数据有二种艺术:add()方法put()方法

那三种形式的界别紧要反映在:当要添加数据的对象存储空间中曾经存在有相同键的数量时,使用add()方法添加数据会报错误,而put()方法则会对现有数量举办翻新,所以add()方法一般用来开首化数据,而put()方法用于更新数据

代码如下:

// customerData 为要存储的数据
const customerData = [{ ssn: '444-44-4444', name: 'AAA', age: 35, email: '[AAA@company.com](mailto:AAA@company.com)'},{ ssn: '666-66-6666', name: 'CCC', age: 35, email: '[CCC@company.com](mailto:CCC@company.com)'},{ ssn: '777-77-7777', name: 'DDD', age: 32, email: '[DDD@home.org](mailto:DDD@home.org)'},{ ssn: '555-55-5555', name: 'BBB', age: 32, email: '[BBB@home.org](mailto:BBB@home.org)'},
];

// 创建一个事务,该事务将要对名为“customers”的对象存储空间进行 read和write 操作,并返回事务索引
let transaction = db.transaction('customers', 'readwrite'); 

// 取得索引后,使用objectStore()方法并传入存储空间的名称,就可以访问特定的存储空间,这两步是必须的
let store = transaction.objectStore('customers'); 

// 添加数据到数据库中
for (var i in customerData) {
  // 返回的req也是一个对象,可以为其添加onsuccess和onerror事件,来检测数据是否添加成功
  let req = store.put(customerData[i]);   // 往一个存储空间中添加数据

}
// 判断事务整个操作完成
transaction.oncomplete = function(event) {
  console.log(event.target);
  alert('存储数据完成');
};
}

如上就将数据存储到数据库dbNames的customers对象存储空间中

上边代码中提到了
[事务],那里先记住:大凡涉及到对数据库的读写删除操作,都须求通过
[事务] 来完成

从数据库中去除数据

除去数据应用delete办法,同上好像:

var request = db.transaction([‘movies’], ‘readwrite’)
.objectStore(‘movies’) .delete(‘27054612’); // 通过键id来删除
request.onsuccess = function(event) { console.log(‘删除成功!’);
console.log(event.target.result); };

1
2
3
4
5
6
7
8
var request =
    db.transaction([‘movies’], ‘readwrite’)
      .objectStore(‘movies’)
      .delete(‘27054612’);  // 通过键id来删除
request.onsuccess = function(event) {
    console.log(‘删除成功!’);
    console.log(event.target.result);
};

 

壹 、使用indexedDB的基本格局

工作和询问操作数据

最简单易行的成立工作的章程是:
var transaction = db.transaction(); // db就是前面的数据库对象
那种措施开创的事体,只好读取数据库中保留的持有目的

貌似用法是:
var transaction = db.transaction('customes', 'readwrite');
意味着只加载customers对象存储空间中的数据,并且是以可读可写的措施加载

即便不传第二个参数,则意味着只可访问,不可修改;

那边再次回到的transaction是工作的目录

然后采取objectStore()办法并传到对象存储空间的名号,就可以访问特定的存储空间了;

如下:

let transaction = db.transaction('customers', 'readwrite'); 
let store = transaction.objectStore('customers'); 

收获了地点的store后,大家可以动用如下方法对数据开展操作:

  • add()和put()方法:用于存储数据
    let req = store.add(data);
  • get(key)方法:获取键为key的目的
    let req = store.get(key);
  • delete(key)方法:删除键为key的目标
    let req = store.delete(key);
  • clear()方法:清空对象存储空间中的全体目标
    let req = store.clear();
    行使上述方法会重回1个目标,通过对其添加onsuccess和onerror事件,可以检测操作是不是中标

注意:通过oncomplete事件目的,访问不到get()请求再次来到的此外数据,必须在响应请求的onsuccess事件处理程序中才能访问到数量

从数据中获取数据

获取数据使用get格局,同上看似:

var request = db.transaction(‘movies’) .objectStore(‘movies’)
.get(‘9999682’); // 通过键alt来取得 request.onsuccess = function(event)
{ console.log(‘获取成功!’, event.target.result); };

1
2
3
4
5
6
7
var request =
    db.transaction(‘movies’)
       .objectStore(‘movies’)
       .get(‘9999682’);  // 通过键alt来获取
request.onsuccess = function(event) {
    console.log(‘获取成功!’, event.target.result);
};

打开数据库并且起初一个事务。

动用游标查询数据

使用工作能够向来通过
已知的键检索单个对象。而在需求寻找七个对象时,则需求在事情内成立游标。

游标并不会提早收集结果,游标先指向结果中的第3项,在吸收查找下一项的命令时,才会针对下一项

如下:

let transaction = db.transaction('customers', 'readwrite'),
let store = transaction.objectStore('customers'),
let request = store.openCursor(null) ; // 这里创建游标
request.onsuccess = function (event) {
  // event.target.result 中保存的是在存储空间中查询到的对象
  // event.target.result 中有几个属性值,可以了解到查询到的对象中的细节,
  // key: 当前访问的对象的键
  // value:当前访问的实际对象
  // primaryKey: 游标使用的键
  // direction:数值,表示游标移动的方向
  let cursor = event.target.result;
  let value, updateRequest, deleteRequest;

  // 这里必须要检查游标中是否有数据
  if (cursor) {
    if (cursor.key === '555-55-5555') {
      value = cursor.value;   // 获取到实际的访问对象
      value.name = 'hexon';   // 修改对象的name属性
      // 调用update()方法可以用指定的对象,更新对象的value
      updateRequest = cursor.update(value);     
      updateRequest.onsuccess = function() {
          // 处理成功
       }
    }
    cursor.continue() ;  // 移动到下一项,会触发下一次请求,同时成功则触发request.onsuccess
  }
}

地点例子中,可以应用cursor.delete()办法删除当前项

五 、使用索引

在前头,我们创制了多个目录alttitle,
配置对象里面的unique性能标志该值是还是不是唯一

现行大家想找到alt属性值为https://movie.douban.com/subject/26639033/的靶子,就可以使用索引。

var alt = ”; var objectStore
= db.transaction(‘movies’).objectStore(‘movies’); // 打开对象存储空间
var index = objectStore.index(‘alt’); // 使用索引’alt’ var request =
index.get(alt); // 创造三个查找数据的呼吁 request.onsuccess =
function(event) { console.log(‘The result is:’, event.target.result); };
var noDataTest = index.get(‘testalt’); // 没有该目的时的测试
noDataTest.onsuccess = function(event) { console.log(‘success! result:’,
event.target.result); }; noDataTest.onerror = function(event) {
console.log(‘error! event:’, event); };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var alt = ‘https://movie.douban.com/subject/26639033/’;
var objectStore = db.transaction(‘movies’).objectStore(‘movies’);  // 打开对象存储空间
var index = objectStore.index(‘alt’);  // 使用索引’alt’
var request = index.get(alt);          // 创建一个查找数据的请求
request.onsuccess = function(event) {
    console.log(‘The result is:’, event.target.result);
};
var noDataTest = index.get(‘testalt’);  // 没有该对象时的测试
noDataTest.onsuccess = function(event) {
    console.log(‘success! result:’, event.target.result);
};
noDataTest.onerror = function(event) {
    console.log(‘error! event:’, event);
};

皇家赌场手机版 5

使用唯一性索引,大家可以得到唯一的一条数据(恐怕undefined),那么使用非唯一性索引呢?
咱俩向数据库中插入一条数据,使title重复:

db.transaction(‘movies’, ‘readwrite’).objectStore(‘movies’) .add({ alt:
”, title: ‘寻梦环游记’,
year: ‘2017’, id: ‘123456789’ }) .onsuccess = function(event) {
console.log(‘插入成功!’); };

1
2
3
4
5
6
7
db.transaction(‘movies’, ‘readwrite’).objectStore(‘movies’)
.add({ alt: ‘https://movie.douban.com/subject/27054612121/’,
    title: ‘寻梦环游记’,
    year: ‘2017’,
    id: ‘123456789’
})
.onsuccess = function(event) { console.log(‘插入成功!’); };

使用索引title获取title值为寻梦环游记的对象:

var indexName = ‘title’, title = ‘寻梦环游记’; var objectStore =
db.transaction(‘movies’).objectStore(‘movies’); var index =
objectStore.index(indexName); // 使用索引’alt’ var request =
index.get(title); // 创立一个寻找数据的央浼 request.onsuccess =
function(event) { console.log(‘The result is:’, event.target.result); };

1
2
3
4
5
6
7
var indexName = ‘title’, title = ‘寻梦环游记’;
var objectStore = db.transaction(‘movies’).objectStore(‘movies’);
var index = objectStore.index(indexName);  // 使用索引’alt’
var request = index.get(title);          // 创建一个查找数据的请求
request.onsuccess = function(event) {
    console.log(‘The result is:’, event.target.result);
};

皇家赌场手机版 6

我们收获的是键值小小的的拾分对象.

应用一遍索引,大家只可以得到一条数据;
假若大家必要取得全体title属性值为寻梦环游记的对象,我们可以使用游标.

创建多少个objecStore。

键范围

游标也足以承受3个键,也等于经过键来设定游标查找的限定;
代码如下:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>WebStorage DEMO</title>
</head>
<body>
<div class=”networkStatus”>
<button class=”clear”>清空数据</button>
<button class=”add”>添加多少</button>
<button class=”query”>查询数据</button>
<button class=”delete”>删除数据</button>
<button class=”cursor”>使用游标查询</button>
<button class=”keyRange”>使用keyrange查询</button>
<button class=”index”>使用index</button>
</div>

<script>
let network = document.querySelector(‘.networkStatus’),
addBtn = document.querySelector(‘.add’),
queryBtn = document.querySelector(‘.query’),
deleteBtn = document.querySelector(‘.delete’),
cursorBtn = document.querySelector(‘.cursor’),
clearBtn = document.querySelector(‘.clear’),
keyRange = document.querySelector(‘.keyRange’),
indexBtn = document.querySelector(‘.index’)
;

// 判断网路是或不是在线
// if (navigator.onLine) {
// network.innerText = “互联网在线”;
// } else {
// network.innerText = “互连网掉线”;
// }

// // 监控网络状态的事件:online 和 offline, 那多少个事件在window对象上
// window.addEventListener(‘online’, () => {
// network.innerText = “互联网在线”;
// });

// window.addEventListener(‘offline’, () => {
// network.innerText = “互连网掉线”;
// });

//——–cookie的使用—————
let CookieUtil = {
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;
},
set: function (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;
},

// 删除cookie, 并没有直接的删除cookie的方法,这里通过重新设置cookie名称,来对cookie进行替换
// 同时 将过期时间expires设置为过去的时间,
unset: function(name, path, domain, secure) {
  this.set(name, '', new Date(0), path, domain, secure);
}

}

CookieUtil.set(‘name’, ‘hexon’);
CookieUtil.set(‘book’, ‘Profession Javascript’);

// 读取cookie的值
// console.log(CookieUtil.get(‘name’));
// console.log(CookieUtil.get(‘book’));

// 删除cookie
CookieUtil.unset(‘name’);
CookieUtil.unset(‘book’);

// 设置cookie, 包蕴它的路径、域、失效日期
CookieUtil.set(‘name’, ‘Hexon’, ‘books/projs/’,
‘www.wrox.com’, new
Date(‘January 1, 2017’));

// 删除刚刚安装的cookie
CookieUtil.unset(‘name’, ‘books/projs/’,
‘www.www.wrox.com’);

// 设置安全的cookie
CookieUtil.unset(‘name’, ‘hexon’, null, null, null, null, true)

// — IndexedDB 数据库的使用
var request = window.indexedDB.open(‘dbName’, 2)
var db;
const dbName = ‘the_name’;
// 创立三个数量
const customerData = [
{ ssn: ‘444-44-4444’, name: ‘AAA’, age: 35, email:
‘AAA@company.com’},
{ ssn: ‘666-66-6666’, name: ‘CCC’, age: 35, email:
‘CCC@company.com’},
{ ssn: ‘777-77-7777’, name: ‘DDD’, age: 32, email:
‘DDD@home.org’},
{ ssn: ‘555-55-5555’, name: ‘BBB’, age: 32, email:
‘BBB@home.org’},

];

window.indexedDB = window.indexedDB || window.msIndexedDB ||
window.mozIndexedDB || window.webkitIndexedDB;
window.IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction || window.msIDBTransaction || {READ_WRITE:
“readwrite”};
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange ||
window.msIDBKeyRange;
window.IDBCursor = window.IDBCursor || window.webkitIDBTransaction;

if (!window.indexedDB) {
window.alert(“Your browser doesn’t support a stable version of
IndexedDB.”)
}

// 3
是确立的数据库版本,假若名为MyTestDatabase的数据库不存在,就会创建该数据库,然后
onupgradeneeded 事件会被触发;
// 假如数据库存在,然而对版本升级了,也会触发onupgradeneeded事件,
// 注意:版本号是一个 unsigned long long
类型的值,由此不用采用float,否则会将其更换为其最相近的平头

// 生成处理程序
request.onerror = function (event) {
// do Something
alert(‘Database error: ‘ + event.target.errorCode);
};

request.onsuccess = function (event) {
// do Something
console.log(‘创造数据库成功’);
db = event.target.result; // 成立成功后,e.target.result
中贮存的是IDBDatabase对象的实例
}

// 当创设3个新的多寡库 可能 更新已存在数据库的版本,
onupgradeneeded事件将会被触发,新的靶子存储在event.target.result中。
//
在该处理程序中,数据库已经有所先前版本的靶子存储,由此不用再次制造那一个目的存储,只要求成立任何大家须要的靶子存储,可能
//
从从前版本中除去不在须求的目的存储。倘若急需转移当前目的存储,则必须先删除旧的对象存储,然后在使用新的选项创立。
// 删除旧的靶子存储,在其上的音讯都会被剔除;
//
注意:该事件是唯一3个力所能及对数据库举行操作的地点,在该事件之中,你对目的存储进行删减、修改或移除索引
request.onupgradeneeded = function(event) {
console.log(‘onupgradeneeded’);
var db = event.target.result;

// 创建一个   对象存储空间,名为customers
var objectStore = db.createObjectStore('customers', {keyPath: 'ssn'});
// 对于某些数据,可以为一个对象存储空间指定多个键。比如,若要通过用户ID 和用户名 两种方式来保存用户资料,就需要通过两个键来存取记录
// 因此可以使用createIndex,名字是有可能重复的,所以其unique 设置为 false ;第一个name是索引的名字,该名字是索引的名字,第二个name是索引的属性的名字,该名字要与对象中的属性相同
objectStore.createIndex('name', 'name', { unique: false});

// // 创建一个email的索引,该email是独特的,所以 unique 设置为 true
objectStore.createIndex('email', 'email', { unique: true});

}

function save(data) {
///
对于数据库的目的存储空间中数据的读取或涂改数据,都要经过事物来公司拥有操作
// 最简易的创办事物的法门是:var transaction = db.transaction();
let transaction = db.transaction(‘customers’, ‘readwrite’); //
创设二个工作,并定义该事务的操作为 “readwrite” ,并赶回其索引
let store = transaction.objectStore(‘customers’); //
取得索引后,使用objectStore()方法并传播存储空间的名目,就足以访问特定的积存空间

for (var i in customerData) {
  let req = store.put(customerData[i]);   // 往一个存储空间中添加数据
}

transaction.oncomplete = function(event) {
  console.log(event.target);
  alert('存储数据完成');
};

transaction.onsuccess = function(event ) {
  console.log('onsuccess 事件');
}

}

function clear() {
// body…
let transaction = db.transaction(‘customers’, ‘readwrite’);
let store = transaction.objectStore(‘customers’).clear();
store.onerror = function(event) {
console.log(‘清空数据失败’);
}
store.onsuccess = function(event) {
console.log(‘清空数据成功’);
}
}

// 使用事务 直接通过已知的键索引 单个对象 (只可以索引单个对象)
function getData() {
let transaction = db.transaction(‘customers’, ‘readwrite’); //
创立一个东西, 并定义该事情的操作为 “readonly”
let store = transaction.objectStore(‘customers’).get(‘444-44-4444’); //
使用get() 可以获取值

store.onerror = function (event) {
  alert('did not get the object');
}

store.onsuccess = function (event) {
  var result = event.target.result;
  console.log(result);
  alert('获取数据完成! 年龄是: ' + result.age);
}

}

function deleteData() {
let transaction = db.transaction(‘customers’, ‘readwrite’);
let store = transaction.objectStore(‘customers’);
store.delete(‘444-44-4444’);
alert(‘s删除数据形成’);
}

// 在业务内制造游标查询 可以索引 多少个目标(注意: 是八个对象)
// 游标不提前手机结果
function cursorQuery() {
let transaction = db.transaction(‘customers’, ‘readwrite’),
store = transaction.objectStore(‘customers’),
request = store.openCursor(null) ; // 那里创办游标

request.onsuccess = function (event) {

  // event.target.result 中保存的是在存储空间中查询到的对象
  // event.target.result 中有几个属性值,可以了解到查询到的对象中的细节,
  // key: 当前访问的对象的键
  // value:当前访问的实际对象
  // primaryKey: 游标使用的键
  // direction:数值,表示游标移动的方向

  let cursor = event.target.result;
  let value, updateRequest, deleteRequest;
  if (cursor) {
  //   if (cursor.key === '555-55-5555') {
  //     value = cursor.value;   // 获取到实际的访问对象
  //     value.name = 'hexon';   // 修改对象的name属性

  //     updateRequest = cursor.update(value);      // 调用update()方法可以用指定的对象,更新对象的value
  //     updateRequest.onsuccess = function() {
  //       // 处理成功
  //     }
  //     updateRequest.onerror = function() {
  //       // 处理失败
  //     }


  //     // 使用游标删除当前项
  //     // deleteRequest = cursor.delete();
  //     // deleteRequest.onsuccess = function() {
  //     //   // 删除成功处理
  //     // }
  //     // deleteRequest.onerror = function() {
  //     //   // 删除失败处理
  //     // }


  //   }
  //   console.log(event.target.result);
  // }
  console.log(cursor.value);
  cursor.continue();      // 移动到下一项,
  }
  request.onerror = function(event) {
    console.log('游标查询创建失败')
  }
}

}

// 使用keyrange查询
function keyRangeQuery() {
let transaction = db.transaction(‘customers’, ‘readwrite’)
let store = transaction.objectStore(‘customers’);
// 使用bound()方法 定义键范围
let range = IDBKeyRange.bound(‘555-55-5555’, ‘777-77-7777’, true,
false);
// 将键传入游标创造
let request = store.openCursor(range);

request.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    console.log('游标查询到的值' + JSON.stringify(cursor.value));
    cursor.continue()     // 移动到下一项
  }

}

request.onerror = function(event) {
  console.log("使用游标 + keyrange 查询失败")
}

}

// 使用索引
function useIndex() {
let store = db.transaction(‘customers’).objectStore(‘customers’),
index = store.index(‘name’);
request = index.openCursor();
request.onsuccess = function (event) {
let cursor = event.target.result;
if (cursor) {
console.log(cursor);
cursor.continue();
}
}
}

addBtn.addEventListener(‘click’, function(e) {
save();
}, false);

deleteBtn.addEventListener(‘click’, function(e) {
deleteData();
}, false);

queryBtn.addEventListener(‘click’, function(e) {
getData();
}, false);

cursorBtn.addEventListener(‘click’, function(e) {
cursorQuery();
}, false);

clearBtn.addEventListener(‘click’, function(e) {
clear();
}, false);

keyRange.addEventListener(‘click’, function(e) {
keyRangeQuery();
}),

indexBtn.addEventListener(‘click’, function(e) {
useIndex();
})

</script>

</body>
</html>

陆 、使用游标

得到二个可以操作游标的呼吁对象有八个措施:

  • openCursor(keyRange, direction)
  • openKeyCursor(keyRange, direction)
    那七个方法接收的参数一样, 多少个参数都是可选的:
    第③个参数是限制值得范围,第二个参数是点名游标方向

游标的选用有以下几处:

  • 在目的存储空间上利用: var cursor = objectStore.openCursor()
  • 在目录对象上运用: var cursor = index.openCursor()

打造三个伸手来执行一些数据库操作,像增添或提取数额等。

在对象存储空间上运用游标

行使游标常见的一种形式是获取对象存储空间上的兼具数据.

var list = []; var objectStore =
db.transaction(‘movies’).objectStore(‘movies’);
objectStore.openCursor().onsuccess = function(event) { var cursor =
event.target.result; if (cursor) { console.log(‘cursor:’, cursor);
list.push(cursor.value); cursor.continue(); } else { console.log(‘Get
all data:’, list); } };

1
2
3
4
5
6
7
8
9
10
11
12
var list = [];
var objectStore = db.transaction(‘movies’).objectStore(‘movies’);
objectStore.openCursor().onsuccess = function(event) {
    var cursor = event.target.result;
    if (cursor) {
        console.log(‘cursor:’, cursor);
        list.push(cursor.value);
        cursor.continue();
    } else {
        console.log(‘Get all data:’, list);
    }
};

皇家赌场手机版 7

应用游标时,需求在中标回调里得到result对象,判断是还是不是取完了数码:若数据已取完,resultundefined;
若未取完,则result是个IDBCursorWithValue对象,需调用continue()艺术继续取多少。
也足以按照本人需求, 对数码进行过滤。

indexedDB2规范中,在目的存储空间对象上纳入了一个getAll()方法,可以拿到具有目的:

objectStore.getAll().onsuccess = function(event) {
console.log(‘result:’, event.target.result); };

1
2
3
objectStore.getAll().onsuccess = function(event) {
    console.log(‘result:’, event.target.result);
};

经过监听正确类型的DOM事件以伺机操作达成。

在目录上行使游标

接着本文上述使用索引的事例,在目录title上使用openCursor()方式时,若不传参数,则会遍历全部数据,在功成名就回调中的到的result目的有以下属性:

  • key 数据库中那条对象的title属性值
  • primaryKey 数据库中那条对象的alt
  • value 数据库中那条对象
  • direction openCursor()方法传入的第③个对象,默许值为next
  • source IDBIndex对象 举例如下:
var index = db .transaction('movies')
.objectStore('movies').index('title'); index.openCursor().onsuccess
= function(event) { var cursor = event.target.result; if (cursor) {
console.log('cursor:', cursor); cursor.continue(); } };

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f37afae763506229096-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f37afae763506229096-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f37afae763506229096-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f37afae763506229096-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f37afae763506229096-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f37afae763506229096-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f37afae763506229096-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f37afae763506229096-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f37afae763506229096-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f37afae763506229096-10">
10
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f37afae763506229096-1" class="crayon-line">
var index = db
</div>
<div id="crayon-5b8f37afae763506229096-2" class="crayon-line crayon-striped-line">
.transaction('movies')
</div>
<div id="crayon-5b8f37afae763506229096-3" class="crayon-line">
.objectStore('movies').index('title');
</div>
<div id="crayon-5b8f37afae763506229096-4" class="crayon-line crayon-striped-line">
index.openCursor().onsuccess = function(event) {
</div>
<div id="crayon-5b8f37afae763506229096-5" class="crayon-line">
  var cursor = event.target.result;
</div>
<div id="crayon-5b8f37afae763506229096-6" class="crayon-line crayon-striped-line">
  if (cursor) {
</div>
<div id="crayon-5b8f37afae763506229096-7" class="crayon-line">
      console.log('cursor:', cursor);
</div>
<div id="crayon-5b8f37afae763506229096-8" class="crayon-line crayon-striped-line">
      cursor.continue();
</div>
<div id="crayon-5b8f37afae763506229096-9" class="crayon-line">
  }
</div>
<div id="crayon-5b8f37afae763506229096-10" class="crayon-line crayon-striped-line">
};
</div>
</div></td>
</tr>
</tbody>
</table>


[![](http://jbcdn2.b0.upaiyun.com/2017/12/5451a2dedd05d9226415141022934c72.png)](http://jbcdn2.b0.upaiyun.com/2017/12/5451a2dedd05d9226415141022934c72.png)

在索引title上使用openKeyCursor()艺术,若不传参数,同样也会遍历全体数据,result对象属性如下:

  • key 数据库中那条对象的title属性值
  • primaryKey 数据库中那条对象的alt
  • direction openCursor()方法传入的第四个目的,暗中认同值为next
  • source altBIndex对象

openCursor()措施比较,拿到的数额少三个value质量,是从未有过办法得到存储对象的其他部分

眼下说到,大家要依据目录title获取具有title属性值为寻梦环游记的靶子,要采纳游标,而又不想遍历全部数据,那时就要采用openCursor()的第三个参数:
keyRange

keyRange是限量游标遍历的多寡范围,通过IDBKeyRange的局地措施设置该值:

var singleKeyRange = IDBKeyRange.only(“寻梦环游记”), list = []; var
index = db .transaction(‘movies’) .objectStore(‘movies’).index(‘title’);
index.openCursor(singleKeyRange).onsuccess = function(event) { var
cursor = event.target.result; if (cursor) { console.log(‘cursor.value:’,
cursor.value); list.push(cursor.value); cursor.continue(); } else {
console.log(‘list:’, list); } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var singleKeyRange = IDBKeyRange.only("寻梦环游记"), list = [];
var index = db
.transaction(‘movies’)
.objectStore(‘movies’).index(‘title’);
index.openCursor(singleKeyRange).onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
console.log(‘cursor.value:’, cursor.value);
list.push(cursor.value);
cursor.continue();
} else {
    console.log(‘list:’, list);
}
};

皇家赌场手机版 8

IDBKeyRange其他部分主意:

// 匹配全体在 “Bill” 后面的, 包蕴 “Bill” var lowerBoundKeyRange =
IDBKeyRange.lowerBound(“Bill”); // 匹配全体在 “Bill” 前面的,
可是不须求包罗 “Bill” var lowerBoundOpenKeyRange =
IDBKeyRange.lowerBound(“Bill”, true); // 匹配全数在’堂娜’前边的,
不过不包含”堂娜” var upperBoundOpenKeyRange =
IDBKeyRange.upperBound(“堂娜”, true); // 匹配全体在”Bill” 和 “堂娜”
之间的, 可是不蕴涵 “堂娜” var boundKeyRange = IDBKeyRange.bound(“Bill”,
“堂娜”, false, true);

1
2
3
4
5
6
7
8
9
10
11
// 匹配所有在 "Bill" 前面的, 包括 "Bill"
var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");
 
// 匹配所有在 “Bill” 前面的, 但是不需要包括 "Bill"
var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);
 
// 匹配所有在’Donna’后面的, 但是不包括"Donna"
var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);
 
// 匹配所有在"Bill" 和 "Donna" 之间的, 但是不包括 "Donna"
var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);

越来越多请参考
MDN|IDBKeyRange

游标暗中同意遍历方向是按主键从小到大,有时候大家倒序遍历,此时得以给openCursor()措施传递首个参数:
direction: next|nextunique|prev|prevunique

var singleKeyRange = IDBKeyRange.only(“寻梦环游记”), list = []; var
index = db .transaction(‘movies’) .objectStore(‘movies’).index(‘title’);
index.openCursor(singleKeyRange, ‘prev’).onsuccess = function(event) {
var cursor = event.target.result; if (cursor) {
console.log(‘cursor.value:’, cursor.value); list.push(cursor.value);
cursor.continue(); } else { console.log(‘list:’, list); } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var singleKeyRange = IDBKeyRange.only("寻梦环游记"), list = [];
var index = db
.transaction(‘movies’)
.objectStore(‘movies’).index(‘title’);
index.openCursor(singleKeyRange, ‘prev’).onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
console.log(‘cursor.value:’, cursor.value);
list.push(cursor.value);
cursor.continue();
} else {
    console.log(‘list:’, list);
}
};

传了prev的结果是按倒序遍历的.

因为 “name” 索引不是绝无仅有的,那就有大概存在具有同等 name 的多条记下。
要留心的是那种场合不容许发生在对象存储空间上,因为键必须永远是绝无仅有的。
若是你想要在游标在目录迭代进程中过滤出双重的,你可以传递
nextunique(或prevunique, 假诺你正在向后查找)作为方向参数。 当
nextunique 或是 prevunique
被利用时,被再次回到的相当总是键最小的笔录。

var singleKeyRange = IDBKeyRange.only(“寻梦环游记”), list = []; var
index = db .transaction(‘movies’) .objectStore(‘movies’).index(‘title’);
index.openCursor(singleKeyRange, ‘prevunique’).onsuccess =
function(event) { var cursor = event.target.result; if (cursor) {
console.log(‘cursor.value:’, cursor.value); list.push(cursor.value);
cursor.continue(); } else { console.log(‘list:’, list); } };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var singleKeyRange = IDBKeyRange.only("寻梦环游记"), list = [];
var index = db
.transaction(‘movies’)
.objectStore(‘movies’).index(‘title’);
index.openCursor(singleKeyRange, ‘prevunique’).onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
console.log(‘cursor.value:’, cursor.value);
list.push(cursor.value);
cursor.continue();
} else {
    console.log(‘list:’, list);
}
};

皇家赌场手机版 9

在操作结果上举行一些操作(可以在request对象中找到)

七 、关闭和删除数据库

  • 关门数据库只要求在数据库对象db上调用close()措施即可
db.close();

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f37afae779476637224-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f37afae779476637224-1" class="crayon-line">
db.close();
</div>
</div></td>
</tr>
</tbody>
</table>


关闭数据库后,`db`对象仍然保存着该数据库的相关信息,只是无法再开启事务(调用开启事务方法会报错,提示数据库连接已断开):

皇家赌场手机版 10

  • 除去数据库则需求拔取indexedDB.deleteDatabase(dbName)方法
JavaScript

window.indexedDB.deleteDatabase(dbName);

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f37afae77e452573671-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f37afae77e452573671-1" class="crayon-line">
window.indexedDB.deleteDatabase(dbName);
</div>
</div></td>
</tr>
</tbody>
</table>

贰 、成立、打开数据库

捌 、indexedDB的局限性

以下情形不合乎利用IndexedDB

  • 大地各样语言混合存储。国际化支持糟糕。必要团结处理。
  • 和服务器端数据库同步。你得投机写同步代码。
  • 全文检索。

专注,在偏下景况下,数据库大概被解除:

  • 用户请求解除数据。
  • 浏览器处于隐衷情势。最后退出浏览器的时候,数据会被破除。
  • 硬盘等存储设备的体积到限。
  • 不得法的
  • 不完整的改变.

indexedDB存在于全局对象window上, 它最根本的三个方法就是open方法,
该措施接收八个参数:

总结

  1. 使用indexedDB.open(dbName, version)开辟二个数据库连接
  2. 使用indexedDB.deleteDatabase(dbName)删去一个数据库
  3. 在数据库对象db上使用createObjectStore(storeName, config)创制对象存储空间
  4. 在对象存储空间objectStore上使用createIndex(indexName, keyName, config)成立索引
  5. 对数据库的操作都急需通过事务完成:
    var transction = db.transaction([storeName], mode)
  6. 数据库的增删改查均通过objectStore目的落成,var objectStore = transaction.objectStore(storeName)
  7. 对数据库数据操作有: add()get()delete()put等方法
  8. 检索数据足以应用索引: objectStore.index(indexName)
  9. 遍历和过滤数据足以采取游标: openCursor(keyRange, direction)

dbName// 数据库名称[string]

参照链接

  • IndexedDB的基本概念-MDN
  • 使用
    IndexedDB-MDN
  • IndexedDB
    API接口-MDN
  • Indexed Database API 2.0 – w3c

    1 赞 2 收藏 1
    评论

皇家赌场手机版 11

version// 数据库版本[整型number]

varDB_NAME=’indexedDB-test’,VERSION=1,db;

varrequest=indexedDB.open(DB_NAME,VERSION);

request.onsuccess=function(event){

db=event.target.result;

// console.log(event.target === request); // true

db.onsuccess=function(event){

console.log(‘数据库操作成功!’);

};

db.onerror=function(event){

console.error(‘数据库操作发生错误!’,event.target.errorCode);

};

console.log(‘打开数据库成功!’);

};

request.onerror=function(event){

console.error(‘创造数据库出错’);

console.error(‘error code:’,event.target.errorCode);

};

request.onupgradeneeded=function(event){

// 更新目的存储空间和目录 ….

};

假若本域下不设盛名为DB_NAME的数据库,则上述代码会成立几个名为DB_NAME、版本号为VEXC60SION的数据库;
触发的事件依次为:upgradeneeded、success.

一旦已存在名为DB_NAME的数据库, 则上述代码会打开该数据库;
只触发success/error事件,不会触发upgradeneeded事件.db是对该数据库的引用.

③ 、创立对象存储空间和目录

在关系型数据库(如mysql)中,一个数据库中会有多张表,每张表有分其他主键、索引等;

在key-value型数据库(如indexedDB)中,
1个数据库会有多个目的存储空间,每一个存储空间有投机的主键、索引等;

成立对象存储空间的操作一般位于创制数据库成功回调里:

request.onupgradeneeded=function(event){// 更新目的存储空间和目录 ….

vardatabase=event.target.result;

varobjectStore=database.createObjectStore(“movies”,{keyPath:”id”});

objectStore.createIndex(‘alt’,’alt’,{unique:true});

objectStore.createIndex(‘title’,’title’,{unique:false});

};

皇家赌场手机版 12

onupgradeneeded是大家唯一可以修改数据库结构的地方。在那里面,大家可以创设和删除对象存储空间以及营造和删除索引。

在数据库对象database上,有以下措施可供调用:

createObjectStore(storeName, configObj)创立三个目标存储空间

storeName// 对象存储空间的名号[string]

configObj//
该目标存储空间的配备[object](其中的keyPath属性值,标志对象的该属性值唯一)

createIndex(indexName, objAttr, configObj)创制一个索引

indexName// 索引名称[string]

objAttr// 对象的属性名[string]

configObj// 该索引的安排对象[object]

肆 、扩大和删除数据

对数据库的操作(增删查改等)都必要经过事务来完成,事务不无三种格局:

readonly只读(可以并发举行,优先拔取)

readwrite读写

versionchange版本变更

向数据库中加进数据

前方提到,增添多少须求通过事务事务的使用方法如下:

vartransaction=db.transaction([‘movies’],’readwrite’);

transaction.oncomplete=function(event){

console.log(‘事务落成!’);

};

transaction.onerror=function(event){

console.log(‘事务战败!’,event.target.errorCode);

};

transaction.onabort=function(event){

console.log(‘事务回滚!’);

};

数据库对象的transaction()方法接收五个参数:

皇家赌场手机版 13

storeNames//
对象存储空间,可以是目的存储空间名称的数组,也得以是单个对象存储空间名称,必传[array|string]

mode// 事务形式,下面提到的两种之一,可选,默许值是readonly[string]

如此,大家赢得三个事务对象transaction,
有二种事件恐怕会被触发:complete,error,abort.
未来,大家通过工作向数据库indexedDB-test的 对象存储空间movies中插入数据:

varobjectStore=transaction.objectStore(‘movies’);// 内定对象存储空间

vardata=[{

“title”:”寻梦环游记”,

“year”:”2017″,

“alt”:””,

“id”:”20495023″

},{

“title”:”你在哪”,

“year”:”2016″,

“alt”:””,

“id”:”26639033″

},{

“title”:”笔仙咒怨”,

“year”:”2017″,

“alt”:””,

“id”:”27054612″

}];

data.forEach(function(item,index){

varrequest=objectStore.add(item);

request.onsuccess=function(event){

console.log(‘插入成功!’,index);

console.log(event.target.result,item.id);//
add()方法调用成功后result是被添加的值的键(id)

};

});

皇家赌场手机版 14

透过工作对象transaction,在objectStore()方法中内定对象存储空间,就收获了可以对该目标存储空间拓展操作的对象objectStore.

向数据库中追加多少,add()方法增添的靶子,倘若数据库中已存在一样的主键,或然唯一性索引的键值重复,则该条数据不会插入进去;

增添数量还有1个措施:put(),
使用办法和add()差距之处在于,数据库中若存在一样主键只怕唯一性索引重复,则会更新该条数据,否则插入新数据。

从数据库中去除数据

删去数据利用delete方法,同上好像:

varrequest=

db.transaction([‘movies’],’readwrite’)

.objectStore(‘movies’)

.delete(‘27054612’);// 通过键id来删除

request.onsuccess=function(event){

console.log(‘删除成功!’);

console.log(event.target.result);

};

从数额中获取数据

获取数据使用get方法,同上接近:

varrequest=

db.transaction(‘movies’)

.objectStore(‘movies’)

.get(‘9999682’);// 通过键alt来获取

request.onsuccess=function(event){

console.log(‘获取成功!’,event.target.result);

};

伍 、使用索引

在头里,我们创设了多少个索引alt和title,
配置对象里面的unique属性标志该值是不是唯一

现行我们想找到alt属性值为

varalt=”;

varobjectStore=db.transaction(‘movies’).objectStore(‘movies’);//
打开对象存储空间

varindex=objectStore.index(‘alt’);// 使用索引’alt’

varrequest=index.get(alt);// 成立三个搜索数据的伸手

request.onsuccess=function(event){

console.log(‘The result is:’,event.target.result);

};

varnoDataTest=index.get(‘testalt’);// 没有该对象时的测试

noDataTest.onsuccess=function(event){

console.log(‘success! result:’,event.target.result);

};

noDataTest.onerror=function(event){

console.log(‘error! event:’,event);

};

皇家赌场手机版 15

接纳唯一性索引,大家可以取得唯一的一条数据(或许undefined),那么使用非唯一性索引呢?

俺们向数据库中插入一条数据,使title重复:

db.transaction(‘movies’,’readwrite’).objectStore(‘movies’)

.add({alt:”,

title:’寻梦环游记’,

year:’2017′,

id:’123456789′

})

.onsuccess=function(event){console.log(‘插入成功!’);};

选用索引title获取title值为寻梦环游记的对象:

varindexName=’title’,title=’寻梦环游记’;

varobjectStore=db.transaction(‘movies’).objectStore(‘movies’);

varindex=objectStore.index(indexName);// 使用索引’alt’

varrequest=index.get(title);// 创设七个摸索数据的伸手

request.onsuccess=function(event){

console.log(‘The result is:’,event.target.result);

};

皇家赌场手机版 16

大家得到的是键值小小的的丰盛对象.

动用一遍索引,大家只好获取一条数据;
假如我们必要取得全部title属性值为寻梦环游记的目的,大家能够利用游标.

陆 、使用游标

赢得2个方可操作游标的请求对象有五个艺术:

openCursor(keyRange, direction)

openKeyCursor(keyRange, direction)

那八个办法接收的参数一样, 多个参数都是可选的:
第二个参数是限制值得范围,第二个参数是内定游标方向

游标的利用有以下几处:

在对象存储空间上行使:var cursor = objectStore.openCursor()

在目录对象上应用:var cursor = index.openCursor()

在对象存储空间上运用游标

行使游标常见的一种方式是得到对象存储空间上的具有数据.

varlist=[];

varobjectStore=db.transaction(‘movies’).objectStore(‘movies’);

objectStore.openCursor().onsuccess=function(event){

varcursor=event.target.result;

if(cursor){

console.log(‘cursor:’,cursor);

list.push(cursor.value);

cursor.continue();

}else{

console.log(‘Get all data:’,list);

}

};

皇家赌场手机版 17

行使游标时,必要在功成名就回调里得到result对象,判断是不是取完了数额:若数据已取完,result是undefined;
若未取完,则result是个IDBCursorWithValue对象,需调用continue()方法继续取多少。
也能够依照自个儿须求, 对数码进行过滤。

在indexedDB2规范中,在目的存储空间对象上纳入了二个getAll()方法,可以拿到具有目的:

objectStore.getAll().onsuccess=function(event){

console.log(‘result:’,event.target.result);

};

在目录上利用游标

随着本文上述使用索引的例证,在索引title上拔取openCursor()方法时,若不传参数,则会遍历全体数据,在功成名就回调中的到的result对象有以下属性:

key数据库中那条对象的title属性值

primaryKey数据库中那条对象的alt值

value数据库中那条对象

directionopenCursor()方法传入的第二个目的,默许值为next

sourceIDBIndex对象 举例如下:

varindex=db

.transaction(‘movies’)

.objectStore(‘movies’).index(‘title’);

index.openCursor().onsuccess=function(event){

varcursor=event.target.result;

if(cursor){

console.log(‘cursor:’,cursor);

cursor.continue();

}

};

皇家赌场手机版 18

在索引title上利用openKeyCursor()方法,若不传参数,同样也会遍历全数数据,result对象属性如下:

key数据库中那条对象的title属性值

primaryKey数据库中那条对象的alt值

directionopenCursor()方法传入的第四个目的,暗中认可值为next

sourcealtBIndex对象

和openCursor()方法比较,得到的数目少壹个value属性,是绝非办法得到存储对象的其他部分

前边说到,大家要依据索引title拿到具有title属性值为寻梦环游记的靶子,要使用游标,而又不想遍历全数数据,这时就要用到openCursor()的第3个参数:keyRange

keyRange是限量游标遍历的数量范围,通过IDBKeyRange的片段方法设置该值:

varsingleKeyRange=IDBKeyRange.only(“寻梦环游记”),list=[];

varindex=db

.transaction(‘movies’)

.objectStore(‘movies’).index(‘title’);

index.openCursor(singleKeyRange).onsuccess=function(event){

varcursor=event.target.result;

if(cursor){

console.log(‘cursor.value:’,cursor.value);

list.push(cursor.value);

cursor.continue();

}else{

console.log(‘list:’,list);

}

};

皇家赌场手机版 19

IDBKeyRange其余一些格局:

// 匹配全数在 “Bill” 前面的, 包蕴 “Bill”

varlowerBoundKeyRange=IDBKeyRange.lowerBound(“Bill”);

// 匹配全体在 “Bill” 前边的, 不过不须要包含 “比尔”

varlowerBoundOpenKeyRange=IDBKeyRange.lowerBound(“Bill”,true);

// 匹配全部在’堂娜’前面的, 可是不包蕴”堂娜”

varupperBoundOpenKeyRange=IDBKeyRange.upperBound(“Donna”,true);

// 匹配全数在”Bill” 和 “堂娜” 之间的, 可是不包含 “堂娜”

varboundKeyRange=IDBKeyRange.bound(“Bill”,”Donna”,false,true);

更加多请参见MDN|IDBKeyRange

游标默许遍历方向是按主键从小到大,有时候大家倒序遍历,此时可以给openCursor()方法传递第二个参数:direction:next|nextunique|prev|prevunique

1

2

3

4

5

6

7

8

9

10

11

12

13

14

varsingleKeyRange=IDBKeyRange.only(“寻梦环游记”),list=[];

varindex=db

.transaction(‘movies’)

.objectStore(‘movies’).index(‘title’);

index.openCursor(singleKeyRange,’prev’).onsuccess=function(event){

varcursor=event.target.result;

if(cursor){

console.log(‘cursor.value:’,cursor.value);

list.push(cursor.value);

cursor.continue();

}else{

console.log(‘list:’,list);

}

};

传了prev的结果是按倒序遍历的.

因为 “name” 索引不是绝无仅有的,那就有可能存在具有同样 name 的多条记下。
要留心的是那种场馆不容许发生在对象存储空间上,因为键必须永远是绝无仅有的。
如果你想要在游标在目录迭代进度中过滤出双重的,你能够传递nextunique(或prevunique,
假设你正在向后查找)作为方向参数。
当nextunique或是prevunique被使用时,被重回的充裕总是键最小的笔录。

eKeyRange=IDBKeyRange.only(“寻梦环游记”),list=[];

varindex=db

.transaction(‘movies’)

.objectStore(‘movies’).index(‘title’);

index.openCursor(singleKeyRange,’prevunique’).onsuccess=function(event){

varcursor=event.target.result;

if(cursor){

console.log(‘cursor.value:’,cursor.value);

list.push(cursor.value);

cursor.continue();

}else{

console.log(‘list:’,list);

}

};

皇家赌场手机版 20

柒 、关闭和删除数据库

关闭数据库只需求在数据库对象db上调用close()方法即可

1db.close();

关门数据库后,db对象依旧保留着该数据库的连锁音讯,只是不只怕再打开事务(调用开启事务方法会报错,提醒数据库连接已断开):

皇家赌场手机版 21

删去数据库则需求利用indexedDB.deleteDatabase(dbName)方法

JavaScript

1window.indexedDB.deleteDatabase(dbName);

⑧ 、indexedDB的局限性

以下情状不符合利用IndexedDB

普天之下各类语言混合存储。国际化协助不好。需求协调处理。

和劳务器端数据库同步。你得和谐写同步代码。

全文检索。

专注,在以下意况下,数据库或然被清除:

用户请求解除数据。

浏览器处于隐衷情势。最终退出浏览器的时候,数据会被化解。

硬盘等存储设备的体积到限。

不科学的

不完全的改变.

总结

采用indexedDB.open(dbName, version)打开三个数据库连接

行使indexedDB.deleteDatabase(dbName)删除贰个数据库

在数据库对象db上利用createObjectStore(storeName, config)创制对象存储空间

在目的存储空间objectStore上接纳createIndex(indexName, keyName,
config)创设索引

对数据库的操作都亟待经过事务完成:var transction =
db.transaction([storeName], mode)

数据库的增删改查均经过objectStore对象完毕,var objectStore =
transaction.objectStore(storeName)

对数据库数据操作有:add()、get()、delete()、put等办法

招来数据可以使用索引:objectStore.index(indexName)

遍历和过滤数据可以利用游标:openCursor(keyRange, direction)

皇家赌场手机版 22

+群289683894 领取资料,交换学习

Leave a Comment.