当前位置: 56net亚洲必嬴 > Web前端 > 正文

IndexedDB数据库

时间:2019-11-01 12:34来源:Web前端
indexedDB 基本使用 2017/12/14 · 基础手艺 ·1 评论 ·IndexedDB 初藳出处:党黎明    indexedDB 简介: 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正是三个数据库
其最大的特征是: 接受对象保存数据,实际不是运用表来保存数据,同一时间,它是异步的

浓郁解析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使用对象存款和储蓄来存储数据,并不是因此表。 每当四个值存储在对象存款和储蓄中,它与三个键相关联。 它同意大家成立的别的对象存款和储蓄索引。 索引允许大家访谈存储在目的存款和储蓄中的值。 上边包车型客车代码显示了怎么成立对象存款和储蓄并插入预先希图好的数码:

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()方法接纳3个参数(第二个和第七个是可选的)。 第多个是大家要处理的目的存储的列表,第三个钦命大家是或不是要只读/读写,第多个是本子变化。
 
从表中读取数据 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()方法。
 
最后代码
下边包车型客车法子从指标源中删除一条记下:

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. 构建一个伸手来施行一些数据库操作,像扩充或提取数据等。
  4. 因此监听准确类型的 DOM 事件以伺机操作完结。
  5. 在操作结果上实行一些操作(能够在 request 对象中找到)

行使方法

二、创制、张开数据库

indexedDB 存在于全局对象window上, 它最重大的一个艺术就是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是对该数据库的援用.

接连数据库

要运用它必得先开采,通过 indexDB.open(name, version)方法张开二个数据库

  • name : 表示数据要开垦的数据库的称号
  • version:为展开数据库的本子号

三、创建对象存款和储蓄空间和目录

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

key-value型数据库(如indexedDB)中, 一个数据库会有七个指标存款和储蓄空间,种种存款和储蓄空间有温馨的主键、索引等;

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

request.onupgradeneeded = function(event) { // 更新指标存款和储蓄空间和目录 .... var database = event.target.result; var objectStore = database.createObjectStore("movies", { key帕特h: "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) 创造二个指标存储空间
    • storeName // 对象存款和储蓄空间的名称 [string]
    • configObj // 该目的存款和储蓄空间的安排 [object] (此中的keyPath属性值,标记对象的该属性值唯生机勃勃)
  2. createIndex(indexName, objAttr, configObj) 创设三个索引
    • indexName // 索引名称 [string]
    • objAttr // 对象的品质名 [string]
    • configObj // 该索引的安排对象 [object]

indexDB.open()主意的原理

分成三种情状:
1. 扩散的数据库不真实
当传入的数据库空中楼阁时,该方法就能够创设三个名叫name的数据库,并展开它,那时候,会先触发upgradeneeded事件;调用该函数会再次回到八个IDBRequest对象,能够在该指标上增添onsuccess事件onerror事件
注意:当展开三个不设有的数据库时会触发upgradeneeded事件,那是触发该事件的后生可畏种渠道,为何会触发该事件呢?该事件有如何作用?留个问号在这里时,等会解答。

2. 传出的数据仓库储存在
那边分为二种处境:

  • 当传入的数据库存在,且version版本号与将要展开的数据库版本号也同等
    则直接张开该数据库,假设成功,则会触发onsuccess事件,退步则触发onerror事件
    注意:这里并不会触发upgradeneeded事件,为啥?留个难题

  • 当传入的数据仓库储存在,可是传入的version版本号高于将要张开的数据库的本子号
    则直接张开该数据库,同有时间触发upgradeneeded事件,然后再接触onsuccess事件onerror事件,这里也接触了onupdateneeded事件

四、增删数据

对数据库的操作(增加和删除查改等)都亟需经过事务来完成,事务有着三种情势:

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

upgradeneeded事件

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

upgradeneeded事件的意义:当展开了三个数据库之后,必要开辟三个名叫:对象存款和储蓄空间 的玩意(能够清楚为数量正是存放在此个空间里面,叁个数据库能够成立五个目的存款和储蓄空间),而 对象存款和储蓄空间 只能在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()措施扩充的对象,若是数据库中已存在相通的主键,也许唯意气风发性索引的键值重复,则该条数据不会插入进去;

扩充数据还应该有贰个措施: put(), 使用格局和add()不相同之处在于,数据库中若存在相近主键或许唯生机勃勃性索引重复,则会更新该条数据,不然插入新数据。

仓库储存数据

存款和储蓄数占有二种方法: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对象存款和储蓄空间中

地点代码中提到了 [事务],这里先记住:大凡涉及到对数据库的读写删除操作,都供给通过 [事务] 来完成

编辑:Web前端 本文来源:IndexedDB数据库

关键词:

  • 上一篇:没有了
  • 下一篇:没有了