澳门金莎娱乐手机版 Web前端 IndexedDB是对象存储,WEB应用在用户浏览器端存储数据【澳门金莎娱乐手机版】

IndexedDB是对象存储,WEB应用在用户浏览器端存储数据【澳门金莎娱乐手机版】



前端的数据库:IndexedDB入门

2014/12/27 · 未分类 · IndexedDB

本文由 伯乐在线 –
cucr
翻译,黄利民
校稿。未经许可,禁绝转发!
乌克兰(УКРАЇНА卡塔 尔(英语:State of Qatar)语出处:www.codemag.com。款待加入翻译组。

应用程序要求多少。对大好多Web应用程序来讲,数据在劳务器端组织和治本,客商端通过网络须求获取。随着浏览器变得特别有技术,由此可采用在浏览器存储和调节应用程序数据。

正文向你介绍名称叫IndexedDB的浏览器端文书档案数据库。使用lndexedDB,你能够经过惯于在服务器端数据库大致千篇风姿罗曼蒂克律的不二秘籍开创、读取、更新和删除大批量的笔录。请使用本文中可专门的学问的代码版本去体验,完整的源代码能够经过GitHub库找到。

读到本课程的最终时,你将领会IndexedDB的基本概念以致怎么样兑现贰个使用IndexedDB推行总体的CRUD操作的模块化JavaScript应用程序。让我们某个亲呢IndexedDB并发轫吧。

什么是IndexedDB

经常的话,有三种不一致门类的数据库:关系型和文书档案型(也叫做NoSQL或对象)。关周密据库如SQL
Server,MySQL,Oracle的数据存款和储蓄在表中。文书档案数据库如MongoDB,CouchDB,Redis将数据集作为个人对象存款和储蓄。IndexedDB是二个文档数据库,它在点点滴滴内停放浏览器中的贰个沙盒景况中(强制依据(浏览器卡塔 尔(英语:State of Qatar)同源计谋)。图1来得了IndexedDB的数额,体现了数据库的组织

澳门金莎娱乐手机版 1

图1:开辟者工具查看多个object
store

全体的IndexedDB API请参谋完整文书档案

深远深入分析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. IndexedDB是对象存储,WEB应用在用户浏览器端存储数据【澳门金莎娱乐手机版】。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”的靶子存款和储蓄,并定义了key帕特h,那是目的唯豆蔻年华性的属性。
    在那间,大家运用“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事务管理。但是结果就分裂

澳门金莎娱乐手机版 2

测量试验的时候b.html中也许不会立马有出口,因为indexedDB正忙着管理a.html东西,b.html事务丢在了专门的工作丢队列中等待。不过无论怎么样,输出结果也不会是1这一个值。因为indexedDB的一丝一毫管理单位是业务,实际不是localStorage这样以表明式为单位。那样只要把lock和unlock之间需求管理的东西归入一个事务中就能够实现。其余,浏览器对indexedDB的扶助不比localStorage,所以接受时还得思虑浏览器宽容。

那篇文章首要介绍了浓郁分析HTML第55中学的IndexedDB索引数据库,包蕴事务锁等底子用的连锁使…

简介

规划标准

IndexedDB的框架结构很像在有的盛行的劳务器端NOSQL数据库达成中的设计规范类型。面向对象数据通过object
stores(对象宾馆卡塔尔实行长久化,全数操作基于诉求同偶然间在作业节制内奉行。事件生命周期令你能够支配数据库的布置,错误通过荒诞冒泡来使用API管理。

IndexedDB是HTML5中的新扩充效果与利益。互联网数据库托管并留存在顾客的浏览器内。只要让开荒职员通过丰富的询问功用创造应用,就能够预言到,将会见世能够同期在线和离线使用的新颖网络接受。

对象旅馆

object
store是IndexedDB数据库的底工。假如您利用过关周密据库,平日能够将object
store等价于叁个数码库表。Object
stores包括八个或多少个目录,在store中服从意气风发对键/值操作,那提供意气风发种高效牢固数据的格局。

当您安顿三个object
store,你必需为store选择二个键。键在store中能够以“in-line”或“out-of-line”的格局存在。in-line键通过在数据对象上援引path来保持它在object
store的唯风华正茂性。为了求证那或多或少,动脑筋二个席卷电子邮件地址属性Person对象。您能够计划你的store使用in-line键emailAddress,它能确定保证store(长久化对象中的数据卡塔尔国的唯黄金时代性。别的,out-of-line键通过独立于数据的值识别唯风姿洒脱性。在这里种景况下,你能够把out-of-line键比作三个平头值,它(整数值卡塔 尔(阿拉伯语:قطر‎在关周到据库中担纲记录的主键。

图1展现了义务数据保存在任务的object
store,它接受in-line键。在这里个案例中,键对应于对象的ID值。

 

轶闻事务

分化于一些观念的关周到据库的落到实处,每二个对数据库操作是在三个事情的光景文中施行的。事务限定二回影响叁个或多少个object
stores,你通过传播一个object store名字的数组到创立职业约束的函数来定义。

始建筑工程作的第二个参数是事情方式。当倡议一个事务时,必需调整是遵照只读依然读写情势乞请访谈。事务是财富密集型的,所以如若您无需改革data
store中的数据,你只需求以只读方式对object stores集结实行呼吁访谈。

清单2示范了何等运用方便的格局创立四个专门的工作,并在这里片小说的 Implementing
Database-Specific Code
 部分开展了详细商讨。

IndexedDB是什么?

依附须求

直到这里,有贰个频仍现身的主旨,您恐怕已经注意到。对数据库的历次操作,描述为经过三个伸手展开数据库,访谈一个object
store,再持续。IndexedDB
API天生是依靠诉求的,那也是API异步个性提醒。对于你在数据库实践的每便操作,你必须首先为这一个操作创制三个央浼。当呼吁完毕,你能够响应由央求结果产生的平地风波和谬误。

正文达成的代码,演示了如何行使伏乞张开数据库,创设多个工作,读取object
store的剧情,写入object store,清空object store。

IndexedDB是指标存款和储蓄,它分化于带有表格(富含行和列的汇集卡塔尔的关周密据库。那是三个重视的有史以来不一样,並且会默转潜移您设计和营造利用的章程。

开辟数据库的伏乞生命周期

IndexedDB使用事件生命周期管理数据库的打开和安顿操作。图2演示了二个开垦的央浼在必然的环境下产生upgrade
need事件。

澳门金莎娱乐手机版 3

图2:IndexedDB张开央浼的生命周期

富有与数据库的竞相初阶于八个张开的哀求。试图展开数据库时,您必得传递贰个被号召数据库的版本号的整数值。在开发央浼时,浏览器相比你传入的用于展开诉求的版本号与实际数据库的版本号。假诺所央浼的版本号高于浏览器中当前的版本号(大概以往不曾存在的数据库),upgrade
needed事件触发。在uprade
need事件之间,你有机会通过足够或移除stores,键和索引来操纵object stores。

譬喻所须要的数据库版本号和浏览器的眼下版本号相通,恐怕晋级历程做到,一个张开的数据库将赶回给调用者。

 

指鹿为马冒泡

当然,有的时候候,诉求恐怕不会按预期实现。IndexedDB
API通过荒唐冒泡效果来赞助跟踪和治本漏洞非常多。假设三个一定的央求遭遇错误,你能够品尝在倡议对象上管理错误,只怕您能够允许错误通过调用栈冒泡向上传递。那几个冒泡天性,使得你无需为每一个央求实现特定错误管理操作,而是能够选取只在贰个更加高等别上加多错误管理,它给您二个机遇,保持你的错误管理代码简洁。本文中贯彻的例证,是在一个高等第管理错误,以便更加细粒度操作发生的别的错误冒泡到通用的错误管理逻辑。

在古板的关周详据存款和储蓄中,大家有七个“待办事项”的表格,个中各行存款和储蓄了顾客待办事项数据的聚众,而各列则是数量的命名类型。要插入数据,常常使用如下语义:INSERTINTO
Todo(id, data, update_time) VALUES (1, “Test”,”01/01/2010″);

浏览器帮忙

或是在开辟Web应用程序最器重的难题是:“浏览器是还是不是支持本人想要做的?“固然浏览器对IndexedDB的支撑在持续加强,接纳率并非大家所企盼的那么广泛。图3显得了caniuse.com网址的告诉,援救IndexedDB的为66%多一丝丝。最新版本的银狐,Chrome,Opera,Safar,iOS
Safari,和Android完全辅助IndexedDB,Internet
Explorer和HTC部分辅助。即便这一个列表的维护者是冲动的,但它并未有报告全数轶事。

澳门金莎娱乐手机版 4

图3:浏览器对IndexedDB的支撑,来自caniuse.com

除非丰盛新本子的Safari和iOS Safari
支持IndexedDB。据caniuse.com显示,那仅占大致0.01%的大千世界浏览器选取。IndexedDB不是一个你感觉能够道理当然是那样的获得帮衬的今世Web
API,然则你将连忙会这么以为。

 

另后生可畏种选用

浏览器协助位置数据库并非从IndexedDB才此前完毕,它是在WebSQL兑现之后的风度翩翩种新章程。相近IndexedDB,WebSQL是二个客户端数据库,但它看做一个关周全据库的落到实处,使用结构化查询语言(SQL)与数据库通讯。WebSQL的历史充满了卷曲,但底线是尚未主流的浏览器厂家对WebSQL继续帮衬。

设若WebSQL实际上是三个吐弃的手艺,为何还要提它吧?风趣的是,WebSQL在浏览器里得到加强的扶植。Chrome,
Safari, iOS Safari, and
Android 浏览器都援救。其余,并不是那个浏览器的新星版本才提供帮忙,大多那几个最新最佳的浏览器早先的本子也得以扶助。风趣的是,如若你为WebSQL加多援助来支撑IndexedDB,你忽地发掘,许多浏览器商家和版本成为援救浏览器内置数据库的某种化身。

于是,假使您的应用程序真正供给二个顾客端数据库,你想要达到的最高档其他使用或许,当IndexedDB不可用时,恐怕你的应用程序或者看起来需求选择使用WebSQL来支撑顾客端数据架构。即使文书档案数据库和关全面据库管理数占领显明的反差,但只要您有科学的肤浅,就足以行使本地数据库构建贰个应用程序。

IndexedDB的区别之处在于,您能够成立有个别项目数据的靶子存款和储蓄,然后只需将JavaScript对象留存在该存款和储蓄中就能够。每一种对象存储都能够有目录的聚合,这样就能够拓宽高效的查询和迭代。

IndexedDB是或不是适合作者的应用程序?

当今最要紧的主题素材:“IndexedDB是不是相符本人的应用程序?“像往常同样,答案是一定的:“视景况而定。“首先当你筹划在顾客端保存数据时,你会思考HTML5本土存款和储蓄。本地存款和储蓄获得大面积浏览器的援救,有不行便于使用的API。轻巧有其优势,但其劣势是回天乏术支撑复杂的探究计谋,存款和储蓄大量的数额,并提供业务援助。

IndexedDB是四个数据库。所以,当你想为客商端做出决定,思谋你怎么着在服务端选取七个持久化媒介物的数据库。你或然会问自身有个别难点来提携调整顾客端数据库是或不是切合你的应用程序,蕴含:

  • 你的顾客通过浏览器访谈您的应用程序,(浏览器卡塔尔扶助IndexedDB API吗 ?
  • 你要求仓库储存一大波的数目在顾客端?
  • 您必要在二个大型的多寡集合中飞速牢固单个数分部?
  • 您的框架结构在客商端供给职业扶持吗?

只要您对内部的其余难题回答了“是的”,很有一点都不小恐怕,IndexedDB是您的应用程序的贰个很好的候选。

 

使用IndexedDB

到现在,你已经有时机熟稔了一些的完整概念,下一步是从头贯彻基于IndexedDB的应用程序。第叁个步骤要求统生龙活虎IndexedDB在分歧浏览器的贯彻。您能够超级轻便地增加种种厂家特性的选料的检讨,同偶尔间在window对象上把它们设置为合法对象肖似的称呼。上面包车型客车清单展现了window.indexedDB,window.IDBTransaction,window.IDBKeyRange的末段结出是怎么着都被更新,它们被安装为相应的浏览器的特定完成。

JavaScript

window.indexedDB = window.indexedDB || window.mozIndexedDB ||
window.webkitIndexedDB || window.msIndexedDB; window.IDBTransaction =
window.IDBTransaction || window.webkitIDBTransaction ||
window.msIDBTransaction; window.IDBKeyRange = window.IDBKeyRange ||
window.webkitIDBKeyRange || window.msIDBKeyRange;

1
2
3
4
5
6
7
8
9
10
window.indexedDB = window.indexedDB ||
                   window.mozIndexedDB ||
                   window.webkitIndexedDB ||
                   window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction ||
                   window.webkitIDBTransaction ||
                   window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange ||
                   window.webkitIDBKeyRange ||
                   window.msIDBKeyRange;

今后,各类数据库相关的全局对象具有精确的本子,应用程序能够思考选拔IndexedDB开端职业。

IndexedDB 还废除了行业内部查询语言(
SQL)的概念,代替他的是针对索引的查询,那样能够发生一个指针,用于在结果集以内迭代。

利用概述

在本教程中,您将学习怎么着创制叁个使用IndexedDB存款和储蓄数据的模块化JavaScript应用程序。为了精通应用程序是如何做事的,参考图4,它陈说了职责应用程序处于空白状态。自此处您可感到列表加多新职务。图5突显了录入了多少个职务到系统的画面。图6来得怎么删除一个职分,图7展现了正在编写制定职务时的应用程序。

澳门金莎娱乐手机版 5

图4:空白的义务应用程序

澳门金莎娱乐手机版 6

图5:义务列表

澳门金莎娱乐手机版 7

图6:删除义务

澳门金莎娱乐手机版 8

图7:编辑任务
当今你了然的应用程序的效率,下一步是起先为网址铺设底蕴。

 

铺设底子

本条事例从落到实处那样叁个模块以前,它担当从数据库读取数据,插入新的靶子,更新现存对象,删除单个对象和提供在三个object
store删除全体指标的选项。这么些例子实现的代码是通用的数目访谈代码,您能够在任何object
store上利用。

以此模块是透过三个立即实行函数表达式(IIFE)落成,它使用对象字面量来提供组织。上边包车型大巴代码是模块的摘要,表明了它的骨干组织。

JavaScript

(function (window) { ‘use strict’; var db = { /* implementation here
*/ }; window.app = window.app || {}; window.app.db = db; }(window));

1
2
3
4
5
6
7
8
(function (window) {
    ‘use strict’;
    var db = {
        /* implementation here */
    };
    window.app = window.app || {};
    window.app.db = db;
}(window));

用那样的构造,能够使那一个应用程序的装有逻辑封装在三个名叫app的单对象上。别的,数据库相关的代码在三个称作db的app子对象上。

以此模块的代码应用IIFE,通过传递window对象来保管模块的切合限定。使用use
strict确定保障这几个函数的代码函数是依据(javascript严厉形式卡塔 尔(英语:State of Qatar)严谨编写翻译准绳。db对象作为与数据库交互的兼具函数的严重性容器。最终,window对象检查app的实例是或不是存在,若是存在,模块使用当前实例,倘使不设有,则开创三个新对象。风度翩翩旦app对象成功重返或创造,db对象附加到app对象。

本文的其他部分将代码增加到db对象内(在implementation
here会
评说),为应用程序提供特定于数据库的逻辑。因而,如您所见本文前面包车型客车局地中定义的函数,动脑父db对象活动,但全体其余职能都以db对象的积极分子。完整的数据库模块列表见清单2。

本学科只是举了一个实际上示例,告诉您针对编写为运用WebSQL
的存活应用怎么着使用IndexedDB。 

Implementing Database-Specific Code

对数据库的各种操作关联着三个先决条件,即有三个开采的数据库。当数据库正在被展开时,通过检查数据库版本来判别数据库是还是不是须要任何改动。上边包车型客车代码突显了模块怎么着追踪当前版本,object
store名、某成员(保存了假若数据库打开央浼实现后的数据库当前实例卡塔 尔(阿拉伯语:قطر‎。

JavaScript

version: 1, objectStoreName: ‘tasks’, instance: {},

1
2
3
version: 1,
objectStoreName: ‘tasks’,
instance: {},

在那间,数据库展开央求发生时,模块诉求版本1数据库。假设数据库不设有,只怕版本小于1,upgrade
needed事件在张开央求达成前触发。那么些模块被安装为只使用贰个object
store,所以名字直接定义在这里地。最后,实例成员被创建,它用来保存风华正茂旦展开央浼实现后的数据库当前实例。

接下去的操作是实现upgrade
needed事件的事件管理程序。在此边,检查当前object
store的名字来决断乞请的object store名是还是不是存在,借使不设有,成立object
store。

JavaScript

upgrade: function (e) { var _db = e.target.result, names =
_db.objectStoreNames, name = db.objectStoreName; if
(!names.contains(name)) { _db.createObjectStore( name, { keyPath: ‘id’,
autoIncrement: true }); } },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
upgrade: function (e) {
    var
        _db = e.target.result,
        names = _db.objectStoreNames,
        name = db.objectStoreName;
    if (!names.contains(name)) {
        _db.createObjectStore(
            name,
            {
                keyPath: ‘id’,
                autoIncrement: true
            });
    }
},

在此个事件管理程序里,通过事件参数e.target.result来访谈数据库。当前的object
store名称的列表在_db.objectStoreName的字符串数组上。今后,假诺object
store空头支票,它是透过传递object
store名称和store的键的概念(自增,关联到多少的ID成员卡塔 尔(阿拉伯语:قطر‎来成立。

模块的下二个职能是用来捕获错误,错误在模块差异的伸手创造时冒泡。

JavaScript

errorHandler: function (error) { window.alert(‘error: ‘ +
error.target.code); debugger; },

1
2
3
4
errorHandler: function (error) {
    window.alert(‘error: ‘ + error.target.code);
    debugger;
},

在那处,errorHandler在一个警报框呈现其余不当。那一个函数是有意保持轻便,对开垦和睦,当你读书使用IndexedDB,您能够相当的轻松地看来其余错误(当她们爆发时卡塔 尔(阿拉伯语:قطر‎。当您筹算在生养条件使用那一个模块,您供给在此个函数中贯彻部分错误管理代码来和您的应用程序的上下文打交道。

前日根底完结了,那风流倜傥节的其他部分将演示怎么样落到实处对数据库实施一定操作。第三个需求检查的函数是open函数。

JavaScript

open: function (callback) { var request = window.indexedDB.open(
db.objectStoreName, db.version); request.onerror = db.errorHandler;
request.onupgradeneeded = db.upgrade; request.onsuccess = function (e) {
db.instance = request.result; db.instance.onerror = db.errorHandler;
callback(); }; },

1
2
3
4
5
6
7
8
9
10
11
12
open: function (callback) {
    var request = window.indexedDB.open(
        db.objectStoreName, db.version);
    request.onerror = db.errorHandler;
    request.onupgradeneeded = db.upgrade;
    request.onsuccess = function (e) {
        db.instance = request.result;
        db.instance.onerror =
            db.errorHandler;
        callback();
    };
},

open函数试图展开数据库,然后实行回调函数,告知数据库成功打开药方可准备利用。通过拜候window.indexedDB调用open函数来创建张开诉求。这些函数选取你想张开的object
store的名称和你想行使的数据库版本号。

假使伏乞的实例可用,第一步要开展的做事是设置错误管理程序和进级函数。记住,当数据库被张开时,借使脚本央求比浏览器里越来越高版本的数据库(只怕风流洒脱旦数据库空头支票),进级函数运转。然则,要是央求的数据库版本相称当前数据库版本同期对的误,success事件触发。

假若全体成功,张开数据库的实例能够从呼吁实例的result属性得到,那个实例也缓存到模块的实例属性。然后,onerror事件设置到模块的errorHandler,作为现在别的要求的错误捕捉管理程序。最终,回调被执行来告诉调用者,数据库已经开拓况兼正确地配备,可以采纳了。

下叁个要贯彻的函数是helper函数,它回到所乞求的object store。

JavaScript

getObjectStore: function (mode) { var txn, store; mode = mode ||
‘readonly’; txn = db.instance.transaction( [db.objectStoreName],
mode); store = txn.objectStore( db.objectStoreName); return store; },

1
2
3
4
5
6
7
8
9
getObjectStore: function (mode) {
    var txn, store;
    mode = mode || ‘readonly’;
    txn = db.instance.transaction(
        [db.objectStoreName], mode);
    store = txn.objectStore(
        db.objectStoreName);
    return store;
},

在这里地,getObjectStore选拔mode参数,允许你决定store是以只读照旧读写情势央求。对于那么些函数,暗许mode是只读的。

种种针对object
store的操作都以在三个东西的上下文中施行的。事务诉求选拔叁个object
store名字的数组。那个函数本次被布置为只使用贰个object
store,不过黄金年代旦您须要在专门的工作中操作多个object store,你需求传递多少个object
store的名字到数组中。事务函数的第3个参数是一个情势。

尽管事情央浼可用,您就可以通过传递必要的object
store名字来调用objectStore函数以赢得object
store实例的访谈权。这些模块的其他函数使用getObjectStore来博取object
store的访谈权。

下叁个落到实处的函数是save函数,实践插入或更新操作,它依据传入的数据是不是有三个ID值。

JavaScript

save: function (data, callback) { db.open(function () { var store,
request, mode = ‘readwrite’; store = db.getObjectStore(mode), request =
data.id ? store.put(data) : store.add(data); request.onsuccess =
callback; }); },

1
2
3
4
5
6
7
8
9
10
11
12
save: function (data, callback) {
    db.open(function () {
        var store, request,
            mode = ‘readwrite’;
 
        store = db.getObjectStore(mode),
        request = data.id ?
            store.put(data) :
            store.add(data);
        request.onsuccess = callback;
    });
},

save函数的三个参数分别是亟需保留的数码对象实例和操作成功后供给施行的回调。读写方式用于将数据写入数据库,它被传播到getObjectStore来博取object
store的三个可写实例。然后,检查数据对象的ID成员是不是存在。要是存在ID值,数据必得修改,put函数被调用,它创造长久化恳求。不然,假若ID不设有,那是新数据,add诉求重回。最终,不管put也许add
乞求是或不是实行了,success事件管理程序需求设置在回调函数上,来报告调用脚本,一切进展顺遂。

下生机勃勃节的代码在项目清单1所示。getAll函数首先展开数据库和做客object
store,它为store和cursor(游标卡塔 尔(阿拉伯语:قطر‎分别设置值。为数据库游标设置游标变量允许迭代object
store中的数据。data变量设置为多个空数组,充作数据的容器,它回到给调用代码。

在store访谈数据时,游标遍历数据库中的每条记下,会触发onsuccess事件管理程序。当每条记下拜候时,store的多寡可以通过e.target.result事件参数获得。就算事实上数据从target.result的value属性中得到,首先须求在计算访问value属性前确认保障result是三个立见成效的值。假使result存在,您可以增加result的值到数据数组,然后在result对象上调用continue函数来世袭迭代object
store。最终,若无reuslt了,对store数据的迭代停止,同临时候数据传递到回调,回调被实行。

近日模块能够从data
store拿到全数数据,下叁个内需得以达成的函数是承采纳访谈问单个记录。

JavaScript

get: function (id, callback) { id = parseInt(id); db.open(function () {
var store = db.getObjectStore(), request = store.get(id);
request.onsuccess = function (e){ callback(e.target.result); }; }); },

1
2
3
4
5
6
7
8
9
10
11
get: function (id, callback) {
    id = parseInt(id);
    db.open(function () {
        var
            store = db.getObjectStore(),
            request = store.get(id);
        request.onsuccess = function (e){
            callback(e.target.result);
        };
    });
},

get函数试行的率先步操作是将id参数的值转变为三个整数。决议于函数被调用时,字符串或整数都或然传递给函数。那一个完结跳过了对要是所给的字符串无法转变来整数该如何做的情事的管理。生龙活虎旦二个id值希图好了,数据库张开了和object
store能够访谈了。获取访问get央浼现身了。诉求成功时,通过传播e.target.result来实行回调。它(e.target.result卡塔尔是经过调用get函数到手的单条记录。

前几天保留和选取操作已经出现了,该模块还要求从object store移除数量。

JavaScript

‘delete’: function (id, callback) { id = parseInt(id); db.open(function
() { var mode = ‘readwrite’, store, request; store =
db.getObjectStore(mode); request = store.delete(id); request.onsuccess =
callback; }); },

1
2
3
4
5
6
7
8
9
10
11
‘delete’: function (id, callback) {
    id = parseInt(id);
    db.open(function () {
        var
            mode = ‘readwrite’,
            store, request;
        store = db.getObjectStore(mode);
        request = store.delete(id);
        request.onsuccess = callback;
    });
},

delete函数的名号用单引号,因为delete是JavaScript的保留字。这能够由你来支配。您可以筛选命名函数为del或其它名目,可是delete用在这里个模块为了API尽也许好的发布。

传递给delete函数的参数是指标的id和多少个回调函数。为了维持这一个完毕简单,delete函数约定id的值为整数。您能够选用创设一个更强健的达成来拍卖id值不可能解析成整数的荒谬例子的回调,但为了指点原因,代码示例是画蛇著足的。

倘若id值能保险调换到一个大背头,数据库被张开,二个可写的object
store获得,delete函数字传送入id值被调用。当呼吁成功时,将进行回调函数。

在一些境况下,您也许需求删除多个object
store的装有的笔录。在这里种景色下,您访问store同期排除全体内容。

JavaScript

deleteAll: function (callback) { db.open(function () { var mode, store,
request; mode = ‘readwrite’; store = db.getObjectStore(mode); request =
store.clear(); request.onsuccess = callback; }); }

1
2
3
4
5
6
7
8
9
deleteAll: function (callback) {
    db.open(function () {
        var mode, store, request;
        mode = ‘readwrite’;
        store = db.getObjectStore(mode);
        request = store.clear();
        request.onsuccess = callback;
    });
}

那边deleteAll函数担当展开数据库和拜见object
store的贰个可写实例。生龙活虎旦store可用,二个新的央浼通过调用clear函数来创设。意气风发旦clear操作成功,回调函数被实践。

 

实践顾客分界面特定代码

今昔具有特定于数据库的代码被封装在app.db模块中,客商分界面特定代码能够使用此模块来与数据库交互作用。客户分界面特定代码的完整清单(index.ui.js)能够在项目清单3中获得,完整的(index.html)页面包车型地铁HTML源代码能够在项目清单4中得到。

怎么是 IndexedDB?

结论

随着应用程序的供给的增长,你会发现在顾客端高效存款和储蓄多量的多寡的优势。IndexedDB是足以在浏览器中央直属机关接使用且扶持异步事务的文书档案数据库完毕。就算浏览器的支撑可能否保证,但在符合的情景下,集成IndexedDB的Web应用程序具有强有力的顾客端数据的访谈技艺。

在大部动静下,全体针对IndexedDB编写的代码是纯天然基于诉求和异步的。官方正式有同步API,不过这种IndexedDB只适合web
worker的前后文中使用。那篇随笔发表时,还从未浏览器达成的风流倜傥Doug式的IndexedDB
API。

自然要保险代码在其余函数域外对厂家特定的indexedDB, IDBTransaction, and
IDBKeyRange实例进行了规范化且使用了严格格局。那允许你幸免浏览器错误,当在strict
mode下解析脚本时,它不会同意你对那二个对象重新赋值。

您必须要确认保证只传递正整数的版本号给数据库。传递到版本号的小数值会四舍五入。因而,假若您的数据库这段日子版本1,您希图访谈1.2版本,upgrade-needed事件不会触发,因为版本号最后评估是黄金年代律的。

立刻实施函数表明式(IIFE)有的时候叫做分歧的名字。不经常能够看看那般的代码组织情势,它叫做self-executing
anonymous functions(自进行无名氏函数卡塔尔国或self-invoked anonymous
functions(自调用无名函数卡塔 尔(英语:State of Qatar)。为更加的分解这么些名称相关的希图和意义,请阅读Ben
Alman的稿子Immediately Invoked Function Expression (IIFE) 。

Listing 1: Implementing the getAll function

JavaScript

getAll: function (callback) { db.open(function () { var store =
db.getObjectStore(), cursor = store.openCursor(), data = [];
cursor.onsuccess = function (e) { var result = e.target.result; if
(result && result !== null) { data.push(result.value);
result.continue(); } else { callback(data); } }; }); },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
getAll: function (callback) {
 
    db.open(function () {
 
        var
            store = db.getObjectStore(),
            cursor = store.openCursor(),
            data = [];
 
        cursor.onsuccess = function (e) {
 
            var result = e.target.result;
 
            if (result &&
                result !== null) {
 
                data.push(result.value);
                result.continue();
 
            } else {
 
                callback(data);
            }
        };
 
    });
},

Listing 2: Full source for database-specific code
(index.db.js)

JavaScript

// index.db.js ; window.indexedDB = window.indexedDB ||
window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
window.IDBTransaction = window.IDBTransaction ||
window.webkitIDBTransaction || window.msIDBTransaction;
window.IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange ||
window.msIDBKeyRange; (function(window){ ‘use strict’; var db = {
version: 1, // important: only use whole numbers! objectStoreName:
‘tasks’, instance: {}, upgrade: function (e) { var _db =
e.target.result, names = _db.objectStoreNames, name =
db.objectStoreName; if (!names.contains(name)) { _db.createObjectStore(
name, { keyPath: ‘id’, autoIncrement: true }); } }, errorHandler:
function (error) { window.alert(‘error: ‘ + error.target.code);
debugger; }, open: function (callback) { var request =
window.indexedDB.open( db.objectStoreName, db.version); request.onerror
= db.errorHandler; request.onupgradeneeded = db.upgrade;
request.onsuccess = function (e) { db.instance = request.result;
db.instance.onerror = db.errorHandler; callback(); }; }, getObjectStore:
function (mode) { var txn, store; mode = mode || ‘readonly’; txn =
db.instance.transaction( [db.objectStoreName], mode); store =
txn.objectStore( db.objectStoreName); return store; }, save: function
(data, callback) { db.open(function () { var store, request, mode =
‘readwrite’; store = db.getObjectStore(mode), request = data.id ?
store.put(data) : store.add(data); request.onsuccess = callback; }); },
getAll: function (callback) { db.open(function () { var store =
db.getObjectStore(), cursor = store.openCursor(), data = [];
cursor.onsuccess = function (e) { var result = e.target.result; if
(result && result !== null) { data.push(result.value);
result.continue(); } else { callback(data); } }; }); }, get: function
(id, callback) { id = parseInt(id); db.open(function () { var store =
db.getObjectStore(), request = store.get(id); request.onsuccess =
function (e){ callback(e.target.result); }; }); }, ‘delete’: function
(id, callback) { id = parseInt(id); db.open(function () { var mode =
‘readwrite’, store, request; store = db.getObjectStore(mode); request =
store.delete(id); request.onsuccess = callback; }); }, deleteAll:
function (callback) { db.open(function () { var mode, store, request;
mode = ‘readwrite’; store = db.getObjectStore(mode); request =
store.clear(); request.onsuccess = callback; }); } }; window.app =
window.app || {}; window.app.db = db; }(window));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
// index.db.js
 
;
 
window.indexedDB = window.indexedDB ||
                   window.mozIndexedDB ||
                   window.webkitIndexedDB ||
                   window.msIndexedDB;
 
window.IDBTransaction = window.IDBTransaction ||
                   window.webkitIDBTransaction ||
                   window.msIDBTransaction;
 
window.IDBKeyRange = window.IDBKeyRange ||
                   window.webkitIDBKeyRange ||
                   window.msIDBKeyRange;
 
(function(window){
 
    ‘use strict’;
 
    var db = {
 
        version: 1, // important: only use whole numbers!
 
        objectStoreName: ‘tasks’,
 
        instance: {},
 
        upgrade: function (e) {
 
            var
                _db = e.target.result,
                names = _db.objectStoreNames,
                name = db.objectStoreName;
 
            if (!names.contains(name)) {
 
                _db.createObjectStore(
                    name,
                    {
                        keyPath: ‘id’,
                        autoIncrement: true
                    });
            }
        },
 
        errorHandler: function (error) {
            window.alert(‘error: ‘ + error.target.code);
            debugger;
        },
 
        open: function (callback) {
 
            var request = window.indexedDB.open(
                db.objectStoreName, db.version);
 
            request.onerror = db.errorHandler;
 
            request.onupgradeneeded = db.upgrade;
 
            request.onsuccess = function (e) {
 
                db.instance = request.result;
 
                db.instance.onerror =
                    db.errorHandler;
 
                callback();
            };
        },
 
        getObjectStore: function (mode) {
 
            var txn, store;
 
            mode = mode || ‘readonly’;
 
            txn = db.instance.transaction(
                [db.objectStoreName], mode);
 
            store = txn.objectStore(
                db.objectStoreName);
 
            return store;
        },
 
        save: function (data, callback) {
 
            db.open(function () {
 
                var store, request,
                    mode = ‘readwrite’;
 
                store = db.getObjectStore(mode),
 
                request = data.id ?
                    store.put(data) :
                    store.add(data);
 
                request.onsuccess = callback;
            });
        },
 
        getAll: function (callback) {
 
            db.open(function () {
 
                var
                    store = db.getObjectStore(),
                    cursor = store.openCursor(),
                    data = [];
 
                cursor.onsuccess = function (e) {
 
                    var result = e.target.result;
 
                    if (result &&
                        result !== null) {
 
                        data.push(result.value);
                        result.continue();
 
                    } else {
 
                        callback(data);
                    }
                };
 
            });
        },
 
        get: function (id, callback) {
 
            id = parseInt(id);
 
            db.open(function () {
 
                var
                    store = db.getObjectStore(),
                    request = store.get(id);
 
                request.onsuccess = function (e){
                    callback(e.target.result);
                };
            });
        },
 
        ‘delete’: function (id, callback) {
 
            id = parseInt(id);
 
            db.open(function () {
 
                var
                    mode = ‘readwrite’,
                    store, request;
 
                store = db.getObjectStore(mode);
 
                request = store.delete(id);
 
                request.onsuccess = callback;
            });
        },
 
        deleteAll: function (callback) {
 
            db.open(function () {
 
                var mode, store, request;
 
                mode = ‘readwrite’;
                store = db.getObjectStore(mode);
                request = store.clear();
 
                request.onsuccess = callback;
            });
 
        }
    };
 
    window.app = window.app || {};
    window.app.db = db;
 
}(window));

Listing 3: Full source for user interface-specific code
(index.ui.js)

JavaScript

// index.ui.js ; (function ($, Modernizr, app) { ‘use strict’;
$(function(){ if(!Modernizr.indexeddb){
$(‘#unsupported-message’).show(); $(‘#ui-container’).hide(); return; }
var $deleteAllBtn = $(‘#delete-all-btn’), $titleText =
$(‘#title-text’), $notesText = $(‘#notes-text’), $idHidden =
$(‘#id-hidden’), $clearButton = $(‘#clear-button’), $saveButton =
$(‘#save-button’), $listContainer = $(‘#list-container’),
$noteTemplate = $(‘#note-template’), $emptyNote = $(‘#empty-note’);
var addNoTasksMessage = function(){ $listContainer.append(
$emptyNote.html()); }; var bindData = function (data) {
$listContainer.html(”); if(data.length === 0){ addNoTasksMessage();
return; } data.forEach(function (note) { var m = $noteTemplate.html(); m
= m.replace(/{ID}/g, note.id); m = m.replace(/{TITLE}/g, note.title);
$listContainer.append(m); }); }; var clearUI = function(){
$titleText.val(”).focus(); $notesText.val(”); $idHidden.val(”); }; //
select individual item $listContainer.on(‘click’, ‘a[data-id]’,
function (e) { var id, current; e.preventDefault(); current =
e.currentTarget; id = $(current).attr(‘data-id’); app.db.get(id,
function (note) { $titleText.val(note.title); $notesText.val(note.text);
$idHidden.val(note.id); }); return false; }); // delete item
$listContainer.on(‘click’, ‘i[data-id]’, function (e) { var id,
current; e.preventDefault(); current = e.currentTarget; id =
$(current).attr(‘data-id’); app.db.delete(id, function(){
app.db.getAll(bindData); clearUI(); }); return false; });
$clearButton.click(function(e){ e.preventDefault(); clearUI(); return
false; }); $saveButton.click(function (e) { var title =
$titleText.val(); if (title.length === 0) { return; } var note = {
title: title, text: $notesText.val() }; var id = $idHidden.val(); if(id
!== ”){ note.id = parseInt(id); } app.db.save(note, function(){
app.db.getAll(bindData); clearUI(); }); }); $deleteAllBtn.click(function
(e) { e.preventDefault(); app.db.deleteAll(function () {
$listContainer.html(”); addNoTasksMessage(); clearUI(); }); return
false; }); app.db.errorHandler = function (e) { window.alert(‘error: ‘ +
e.target.code); debugger; }; app.db.getAll(bindData); }); }(jQuery,
Modernizr, window.app));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
// index.ui.js
 
;
 
(function ($, Modernizr, app) {
 
    ‘use strict’;
 
    $(function(){
 
        if(!Modernizr.indexeddb){
            $(‘#unsupported-message’).show();
            $(‘#ui-container’).hide();
            return;
        }
 
        var
          $deleteAllBtn = $(‘#delete-all-btn’),
          $titleText = $(‘#title-text’),
          $notesText = $(‘#notes-text’),
          $idHidden = $(‘#id-hidden’),
          $clearButton = $(‘#clear-button’),
          $saveButton = $(‘#save-button’),
          $listContainer = $(‘#list-container’),
          $noteTemplate = $(‘#note-template’),
          $emptyNote = $(‘#empty-note’);
 
        var addNoTasksMessage = function(){
            $listContainer.append(
                $emptyNote.html());
        };
 
        var bindData = function (data) {
 
            $listContainer.html(”);
 
            if(data.length === 0){
                addNoTasksMessage();
                return;
            }
 
            data.forEach(function (note) {
              var m = $noteTemplate.html();
              m = m.replace(/{ID}/g, note.id);
              m = m.replace(/{TITLE}/g, note.title);
              $listContainer.append(m);
            });
        };
 
        var clearUI = function(){
            $titleText.val(”).focus();
            $notesText.val(”);
            $idHidden.val(”);
        };
 
        // select individual item
        $listContainer.on(‘click’, ‘a[data-id]’,
 
            function (e) {
 
                var id, current;
 
                e.preventDefault();
 
                current = e.currentTarget;
                id = $(current).attr(‘data-id’);
 
                app.db.get(id, function (note) {
                    $titleText.val(note.title);
                    $notesText.val(note.text);
                    $idHidden.val(note.id);
                });
 
                return false;
            });
 
        // delete item
        $listContainer.on(‘click’, ‘i[data-id]’,
 
            function (e) {
 
                var id, current;
 
                e.preventDefault();
 
                current = e.currentTarget;
                id = $(current).attr(‘data-id’);
 
                app.db.delete(id, function(){
                    app.db.getAll(bindData);
                    clearUI();
                });
 
                return false;
        });
 
        $clearButton.click(function(e){
            e.preventDefault();
            clearUI();
            return false;
        });
 
        $saveButton.click(function (e) {
 
            var title = $titleText.val();
 
            if (title.length === 0) {
                return;
            }
 
            var note = {
                title: title,
                text: $notesText.val()
            };
 
            var id = $idHidden.val();
 
            if(id !== ”){
                note.id = parseInt(id);
            }
 
            app.db.save(note, function(){
                app.db.getAll(bindData);
                clearUI();
            });
        });
 
        $deleteAllBtn.click(function (e) {
 
            e.preventDefault();
 
            app.db.deleteAll(function () {
                $listContainer.html(”);
                addNoTasksMessage();
                clearUI();
            });
 
            return false;
        });
 
        app.db.errorHandler = function (e) {
            window.alert(‘error: ‘ + e.target.code);
            debugger;
        };
 
        app.db.getAll(bindData);
 
    });
 
}(jQuery, Modernizr, window.app));

Listing 3: Full HTML source (index.html)

JavaScript

<!doctype html> <html lang=”en-US”> <head> <meta
charset=”utf-8″> <meta http-equiv=”X-UA-Compatible”
content=”IE=edge”> <title>Introduction to
IndexedDB</title> <meta name=”description”
content=”Introduction to IndexedDB”> <meta name=”viewport”
content=”width=device-width, initial-scale=1″> <link
rel=”stylesheet”
href=”//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/css/font-awesome.min.css” > <link
rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/FontAwesome.otf” > <link
rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.eot” > <link
rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.svg” > <link
rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.ttf” > <link
rel=”stylesheet” href=”//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.woff” > <style>
h1 { text-align: center; color:#999; } ul li { font-size: 1.35em;
margin-top: 1em; margin-bottom: 1em; } ul li.small { font-style: italic;
} footer { margin-top: 25px; border-top: 1px solid #eee; padding-top:
25px; } i[data-id] { cursor: pointer; color: #eee; }
i[data-id]:hover { color: #c75a6d; } .push-down { margin-top: 25px; }
#save-button { margin-left: 10px; } </style> <script
src=”//cdnjs.cloudflare.com/ajax/libs/modernizr%20/2.8.2/modernizr.min.js”
></script> </head> <body class=”container”>
<h1>Tasks</h1> <div id=”unsupported-message” class=”alert
alert-warning” style=”display:none;”> <b>Aww snap!</b>
Your browser does not support indexedDB. </div> <div
id=”ui-container” class=”row”> <div class=”col-sm-3″> <a
href=”#” id=”delete-all-btn” class=”btn-xs”> <i class=”fa
fa-trash-o”></i> Delete All</a> <hr/> <ul
id=”list-container” class=”list-unstyled”></ul> </div>
<div class=”col-sm-8 push-down”> <input type=”hidden”
id=”id-hidden” /> <input id=”title-text” type=”text”
class=”form-control” tabindex=”1″ placeholder=”title” autofocus
/><br /> <textarea id=”notes-text” class=”form-control”
tabindex=”2″ placeholder=”text”></textarea> <div
class=”pull-right push-down”> <a href=”#” id=”clear-button”
tabindex=”4″>Clear</a> <button id=”save-button” tabindex=”3″
class=”btn btn-default btn-primary”> <i class=”fa
fa-save”></i> Save</button> </div> </div>
</div> <footer class=”small text-muted text-center”>by <a
href=”” target=”_blank”>Craig
Shoemaker</a> <a href=””
target=”_blank”> <i class=”fa fa-twitter”></i></a>
</footer> <script id=”note-template” type=”text/template”>
<li> <i data-id=”{ID}” class=”fa fa-minus-circle”></i>
<a href=”#” data-id=”{ID}”>{TITLE}</a> </li>
</script> <script id=”empty-note” type=”text/template”>
<li class=”text-muted small”>No tasks</li> </script>
<script src=”//ajax.googleapis.com/ajax/libs
/jquery/1.11.1/jquery.min.js”></script> <script
src=”index.db.js” type=”text/javascript”></script> <script
src=”index.ui.js” type=”text/javascript”></script>
</body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!doctype html>
<html lang="en-US">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Introduction to IndexedDB</title>
        <meta name="description"
              content="Introduction to IndexedDB">
        <meta name="viewport"
              content="width=device-width, initial-scale=1">
        <link rel="stylesheet"
              href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet"
              href="//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/css/font-awesome.min.css" >
        <link rel="stylesheet"
              href="//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/FontAwesome.otf" >
        <link rel="stylesheet"
              href="//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.eot" >
        <link rel="stylesheet"
              href="//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.svg" >
        <link rel="stylesheet"
              href="//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.ttf" >
        <link rel="stylesheet"
              href="//cdnjs.cloudflare.com/ajax/libs
/font-awesome/4.1.0/fonts/fontawesome-webfont.woff" >
        <style>
            h1 {
                text-align: center;
                color:#999;
            }
 
            ul li {
                font-size: 1.35em;
                margin-top: 1em;
                margin-bottom: 1em;
            }
 
            ul li.small {
                font-style: italic;
            }
 
            footer {
                margin-top: 25px;
                border-top: 1px solid #eee;
                padding-top: 25px;
            }
 
            i[data-id] {
                cursor: pointer;
                color: #eee;
            }
 
            i[data-id]:hover {
                color: #c75a6d;
            }
 
            .push-down {
                margin-top: 25px;
            }
 
            #save-button {
                margin-left: 10px;
            }
        </style>
        <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr
/2.8.2/modernizr.min.js" ></script>
    </head>
    <body class="container">
        <h1>Tasks</h1>
        <div id="unsupported-message"
             class="alert alert-warning"
             style="display:none;">
            <b>Aww snap!</b> Your browser does not support indexedDB.
        </div>
        <div id="ui-container" class="row">
            <div class="col-sm-3">
 
                <a href="#" id="delete-all-btn" class="btn-xs">
                    <i class="fa fa-trash-o"></i> Delete All</a>
 
                <hr/>
 
                <ul id="list-container" class="list-unstyled"></ul>
 
            </div>
            <div class="col-sm-8 push-down">
 
                <input type="hidden" id="id-hidden" />
 
                <input
                       id="title-text"
                       type="text"
                       class="form-control"
                       tabindex="1"
                       placeholder="title"
                       autofocus /><br />
 
                <textarea
                          id="notes-text"
                          class="form-control"
                          tabindex="2"
                          placeholder="text"></textarea>
 
                <div class="pull-right push-down">
 
                    <a href="#" id="clear-button" tabindex="4">Clear</a>
 
                    <button id="save-button"
                            tabindex="3"
                            class="btn btn-default btn-primary">
                                <i class="fa fa-save"></i> Save</button>
                </div>
            </div>
        </div>
        <footer class="small text-muted text-center">by
            <a href="http://craigshoemaker.net" target="_blank">Craig Shoemaker</a>
            <a href="http://twitter.com/craigshoemaker" target="_blank">
                <i class="fa fa-twitter"></i></a>
        </footer>
        <script id="note-template" type="text/template">
            <li>
                <i data-id="{ID}" class="fa fa-minus-circle"></i>
                <a href="#" data-id="{ID}">{TITLE}</a>
            </li>
        </script>
        <script id="empty-note" type="text/template">
            <li class="text-muted small">No tasks</li>
        </script>
        <script src="//ajax.googleapis.com/ajax/libs
/jquery/1.11.1/jquery.min.js"></script>
        <script src="index.db.js" type="text/javascript"></script>
        <script src="index.ui.js" type="text/javascript"></script>
    </body>
</html>

赞 1 收藏
评论

在 二〇〇八 年 10月 18 日,W3C公布弃用Web
SQL数据库标准。那也正是提议网络开荒职员不要再利用这种能力了,该专门的学问也不会再获得新的换代,而且不鼓舞浏览器经销商帮忙该技巧。

关于小编:cucr

澳门金莎娱乐手机版 9

今日头条微博:@hop_ping
个人主页 ·
笔者的稿子 ·
17

澳门金莎娱乐手机版 10

 

取代他的是
IndexedDB,本课程的大旨是开辟人士应运用这种数量存款和储蓄在客户端上囤积数据并开展操作。

 

各大主流浏览器(包括Chrome浏览器、Safari、Opera等卡塔尔国和大致具有基于Webkit的移动道具均帮忙WebSQL,並且很有一点都不小概率在可预知的前景继续提供扶助。

 

先决条件

该示例使用命名空间封装数据库逻辑。 

 

[html] 

var html5rocks = {};  html5rocks.indexedDB = {};  var html5rocks = {};

html5rocks.indexedDB = {};异步和事务性

在大部景况下,要是你使用的是索引型数据库,那么就能接受异步API。异步API是非堵塞系统,因而不会透过重临值拿到多少,而是得到传递到内定回调函数的多少。

 

通过 HTML
扶持IndexedDB是事务性的。在作业之外是爱莫能助奉行命令或张开指针的。事务包罗如下类型:读/写作业、只读事务和快速照相事务。在本教程中,咱们利用的是读/写作业。

 

第 1步:展开数据库

你必需先开发数据库,手艺对其展开操作。 

 

[html]

html5rocks.indexedDB.db = null;    html5rocks.indexedDB.open =
function() {    var request = indexedDB.open(“todos”);    
 request.onsuccess = function(e) {      html5rocks.indexedDB.db =
e.target.result;      // Do some more stuff in a minute    };    
 request.onfailure = html5rocks.indexedDB.onerror;  };
 html5rocks.indexedDB.db = null;

 

html5rocks.indexedDB.open = function() {

  var request = indexedDB.open(“todos”);

 

  request.onsuccess = function(e) {

    html5rocks.indexedDB.db = e.target.result;

    // Do some more stuff in a minute

  };

 

  request.onfailure = html5rocks.indexedDB.onerror;

};大家已开采名称叫“todos”的数据库,并已将其分配给html5rocks.indexedDB对象中的db变量。今后大家能够在全方位课程中央银行使此变量来援引大家的数据库。

 

第 2步:创立对象存款和储蓄

您一定要在“SetVersion”事务内创立对象存款和储蓄。作者还并未有介绍setVersion,那是多少个那叁个主要的主意,那是代码中唯大器晚成能够供您创造对象存款和储蓄和目录的位置。

 

[html]

html5rocks.indexedDB.open = function() {    var request =
indexedDB.open(“todos”,      “This is a description of the database.”);
     request.onsuccess = function(e) {      var v = “1.0”;    
 html5rocks.indexedDB.db = e.target.result;      var db =
html5rocks.indexedDB.db;      // We can only create Object stores in a
setVersion transaction;      if(v!= db.version) {        var setVrequest
= db.setVersion(v);          // onsuccess is the only place we can
create Object Stores        setVrequest.onfailure =
html5rocks.indexedDB.onerror;        setVrequest.onsuccess = function(e)
{          var store = db.createObjectStore(“todo”,            {keyPath:
“timeStamp”});            html5rocks.indexedDB.getAllTodoItems();      
 };      }        html5rocks.indexedDB.getAllTodoItems();    };    
 request.onfailure = html5rocks.indexedDB.onerror;  }
 html5rocks.indexedDB.open = function() {

  var request = indexedDB.open(“todos”,

    “This is a description of the database.”);

 

  request.onsuccess = function(e) {

    var v = “1.0”;

    html5rocks.indexedDB.db = e.target.result;

    var db = html5rocks.indexedDB.db;

    // We can only create Object stores in a setVersion transaction;

    if(v!= db.version) {

      var setVrequest = db.setVersion(v);

 

      // onsuccess is the only place we can create Object Stores

      setVrequest.onfailure = html5rocks.indexedDB.onerror;

      setVrequest.onsuccess = function(e) {

        var store = db.createObjectStore(“todo”,

          {keyPath: “timeStamp”});

 

        html5rocks.indexedDB.getAllTodoItems();

      };

    }

 

    html5rocks.indexedDB.getAllTodoItems();

  };

 

  request.onfailure = html5rocks.indexedDB.onerror;

}上述代码其实有大多作用。大家在
API中定义了“open”方法,调用此方法就可以展开“todos”数据库。打开央求不是即时施行的,而是回到IDBRequest。假设当前函数存在,则会调用indexedDB.open方法。那与大家不认为奇钦命异步回调的章程略有分裂,不过大家在回调实践前,有时机向IDBRequest对象附加我们友好的监听器。

 

假如张开央求成功了,大家的
onsuccess回调就能够实行。在那回调中,大家应检查数据库版本,若是与预期版本不符,则调用“setVersion”。

 

setVersion
是代码中头一无二能让大家转移数据库结构的地点。在setVersion中,大家能够创设和删除对象存款和储蓄,甚至营造和删除索引。调用setVersion可回到IDBRequest对象,供我们在里边附加回调。假如成功了,大家就起首创造对象存款和储蓄。

 

经过对
createObjectStore单次调用创造对象存款和储蓄。该方法会命名存款和储蓄以至参数对象。参数对象相当重大,它可让您定义重要的可选属性。就我们来说,定义keyPath属性可让单个对象在积累中具有唯大器晚成性。本例中的该属性为“timeStamp”。objectStore中寄放的各种对象都必需有“timeStamp”。

 

始建了对象存款和储蓄后,我们调用 getAllTodoItems方法。

 

第 3步:向指标存款和储蓄加多多少

大家要创设的是待办事项列表微型机,因而必定要可以向数据库中增添待办事项。方法如下:

 

[html] 

html5rocks.indexedDB.addTodo = function(todoText) {    var db =
html5rocks.indexedDB.db;    var trans = db.transaction([“todo”],
IDBTransaction.READ_WRITE, 0);    var store =
trans.objectStore(“todo”);    var request = store.put({      “text”:
todoText,      “timeStamp” : new Date().getTime()    });    
 request.onsuccess = function(e) {      // Re-render all the todo’s    
 html5rocks.indexedDB.getAllTodoItems();    };      request.onerror =
function(e) {      console.log(e.value);    };  };
 html5rocks.indexedDB.addTodo = function(todoText) {

  var db = html5rocks.indexedDB.db;

  var trans = db.transaction([“todo”], IDBTransaction.READ_WRITE, 0);

  var store = trans.objectStore(“todo”);

  var request = store.put({

    “text”: todoText,

    “timeStamp” : new Date().getTime()

  });

 

  request.onsuccess = function(e) {

    // Re-render all the todo’s

    html5rocks.indexedDB.getAllTodoItems();

  };

 

  request.onerror = function(e) {

    console.log(e.value);

  };

};addTodo方法极度轻易,大家第黄金时代得到数据库对象的连忙引用,开首化READ_WEscortITE事务,并获得大家对象存储的援引。

 

既是使用有权访问对象存款和储蓄,我们就足以经过底子JSON
对象发出简短的put命令。请介怀timeStamp属性,那是目的的有一无二密钥,并视作“keyPath”使用。put调用成功后,会触发onsuccess事件,然后大家就足以在荧屏上显现内容了。

 

第 4步:查询存款和储蓄中的数据。

既是数据已经在数据库中了,大家就须求经过某种格局以有意义的方法访问数据。幸运的是,那样的法子非常轻易间接:

 

[html] 

html5rocks.indexedDB.getAllTodoItems = function() {    var todos =
document.getElementById(“todoItems”);    todos.innerHTML = “”;      var
db = html5rocks.indexedDB.db;    var trans = db.transaction([“todo”],
IDBTransaction.READ_WRITE, 0);    var store =
trans.objectStore(“todo”);      // Get everything in the store;    var
keyRange = IDBKeyRange.lowerBound(0);    var cursorRequest =
store.openCursor(keyRange);      cursorRequest.onsuccess = function(e) {
     var result = e.target.result;      if(!!result == false)      
 return;        renderTodo(result.value);      result.continue();    };
     cursorRequest.onerror = html5rocks.indexedDB.onerror;  };
 html5rocks.indexedDB.getAllTodoItems = function() {

  var todos = document.getElementById(“todoItems”);

  todos.innerHTML = “”;

 

  var db = html5rocks.indexedDB.db;

  var trans = db.transaction([“todo”], IDBTransaction.READ_WRITE, 0);

  var store = trans.objectStore(“todo”);

 

  // Get everything in the store;

  var keyRange = IDBKeyRange.lowerBound(0);

  var cursorRequest = store.openCursor(keyRange);

 

  cursorRequest.onsuccess = function(e) {

    var result = e.target.result;

    if(!!result == false)

      return;

 

    renderTodo(result.value);

    result.continue();

  };

 

  cursorRequest.onerror = html5rocks.indexedDB.onerror;

};请留意,本例中接收的兼具这个命令都是异步的,由此数据不是从事务内部重临的。

 

该代码可变通事务,并将对于数据的
keyRange搜索实例化。keyRange定义了我们要从存款和储蓄中询问的简练数据子集。假如存款和储蓄的keyRange是数字时间戳,我们应将追寻的眇小值设为0(时间原点后的别样时间卡塔 尔(阿拉伯语:قطر‎,这样就会回去全部数据。

 

明日大家有了业务、对要询问的存放的引用以致要迭代的范围。剩下的劳作便是张开指针并附加“onsuccess”事件了。

 

结果会传递到对指针的功成名就回调,并在中间表现。对于每种结果只会运行贰次回调,由此请必得持续迭代您须求的数额,以保障对结果对象调用“continue”。

 

第 4 步:彰显对象存款和储蓄中的数据

从目的存款和储蓄中抓取了数据后,将对指针中的各样结果调用renderTodo方法。

 

[html] 

function renderTodo(row) {    var todos =
document.getElementById(“todoItems”);    var li =
document.createElement(“li”);    var a = document.createElement(“a”);  
 var t = document.createTextNode();    t.data = row.text;    
 a.addEventListener(“click”, function(e) {    
 html5rocks.indexedDB.deleteTodo(row.text);    });      a.textContent =
” [Delete]”;    li.appendChild(t);    li.appendChild(a);  
 todos.appendChild(li)  }  function renderTodo(row) {

  var todos = document.getElementById(“todoItems”);

  var li = document.createElement(“li”);

  var a = document.createElement(“a”);

  var t = document.createTextNode();

  t.data = row.text;

 

  a.addEventListener(“click”, function(e) {

    html5rocks.indexedDB.deleteTodo(row.text);

  });

 

  a.textContent = ” [Delete]”;

  li.appendChild(t);

  li.appendChild(a);

  todos.appendChild(li)

}对于有些钦定的待办事项,大家只须求获得文本并为其塑造顾客分界面(满含“删除”开关,以便除去待办事项卡塔尔。

 

第 5步:删除表格中的数据

[html] 

html5rocks.indexedDB.deleteTodo = function(id) {    var db =
html5rocks.indexedDB.db;    var trans = db.transaction([“todo”],
IDBTransaction.READ_WRITE, 0);    var store =
trans.objectStore(“todo”);      var request = store.delete(id);    
 request.onsuccess = function(e) {    
 html5rocks.indexedDB.getAllTodoItems();  // Refresh the screen    };  
   request.onerror = function(e) {      console.log(e);    };  };
 html5rocks.indexedDB.deleteTodo = function(id) {

  var db = html5rocks.indexedDB.db;

  var trans = db.transaction([“todo”], IDBTransaction.READ_WRITE, 0);

  var store = trans.objectStore(“todo”);

 

  var request = store.delete(id);

 

  request.onsuccess = function(e) {

    html5rocks.indexedDB.getAllTodoItems();  // Refresh the screen

  };

 

  request.onerror = function(e) {

    console.log(e);

  };

};正如将数据
put到对象存款和储蓄中的代码同样,删除数据也很粗大略。运行二个政工,通过对象引用对象存款和储蓄,然后通过对象的唯大器晚成ID发出delete命令。

 

第 6步:全体关联起来

在加载网页时,展开数据库并创建表格(如有须求卡塔尔国,然后突显数据库中可能已存在的别的待办事项。

 

[html] 

function init() {    html5rocks.indexedDB.open(); // open displays the
data previously saved  }    window.addEventListener(“DOMContentLoaded”,
init, false);  function init() {

  html5rocks.indexedDB.open(); // open displays the data previously
saved

}

 

window.addEventListener(“DOMContentLoaded”, init,
false);那需求用到可将数据收取 DOM的函数,即
html5rocks.indexedDB.addTodo方法: 

 

[html] 

function addTodo() {    var todo = document.getElementById(‘todo’);    
 html5rocks.indexedDB.addTodo(todo.value);  

IndexedDB是HTML5中的新扩展效果与利益。网络数据库托管并留存在客商的浏览器内。只要让开辟人士通过抬高的询问功效创造应用,就能够预感到…

标签:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图