深深分析HTML5中的IndexedDB索引数据库,前端的数据库

前端的数据库:IndexedDB入门

2014/12/27 · 未分类 · IndexedDB

本文由 伯乐在线 –
cucr
翻译,黄利民
校稿。未经许可,制止转发!
斯拉维尼亚语出处:www.codemag.com。迎接插手翻译组。

应用程序须求多少。对大好些个Web应用程序来讲,数据在劳务器端协会和治本,客户端通过互连网央浼获取。随着浏览器变得越来越有力量,因而可选拔在浏览器存款和储蓄和垄断(monopoly)应用程序数据。

正文向您介绍名叫IndexedDB的浏览器端文书档案数据库。使用lndexedDB,你能够经过惯于在劳动器端数据库大约相似的情势开创、读取、更新和删除多量的笔录。请使用本文中可职业的代码版本去体会,完整的源代码能够经过GitHub库找到。

读到本课程的末段时,你将熟知IndexedDB的基本概念甚至哪些达成叁个利用IndexedDB施行总体的CRUD操作的模块化JavaScript应用程序。让我们有个别亲呢IndexedDB并最初吧。

什么是IndexedDB

相同的话,有三种分歧品类的数据库:关系型和文书档案型(也可以称作NoSQL或对象)。关周全据库如SQL
Server,MySQL,Oracle的多少存款和储蓄在表中。文书档案数据库如MongoDB,CouchDB,Redis将数据集作为个人对象存款和储蓄。IndexedDB是四个文书档案数据库,它在完全内停放浏览器中的八个沙盒蒙受中(强制依据(浏览器)同源战术)。图1展现了IndexedDB的数码,体现了数据库的结构

北京赛车app软件下载 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. 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([北京赛车app软件下载,”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事务管理。不过结果就区别

北京赛车app软件下载 2

测量检验的时候b.html中只怕不会立时有出口,因为indexedDB正忙着管理a.html东西,b.html事务丢在了工作丢队列中等待。不过无论怎么样,输出结果也不会是1以此值。因为indexedDB的细微管理单位是业务,并非localStorage那样以表达式为单位。那样只要把lock和unlock之间须求管理的事物归入四个作业中就能够兑现。其它,浏览器对indexedDB的支撑比不上localStorage,所以利用时还得考虑浏览器宽容。

那篇小说重要介绍了尖锐解析HTML5中的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事件。

北京赛车app软件下载 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和BlackBerry部分帮助。即便那么些列表的援救者是令人激励的,但它从不报告全部轶闻。

北京赛车app软件下载 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展现了正在编写任务时的应用程序。

北京赛车app软件下载 5

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

北京赛车app软件下载 6

图5:任务列表

北京赛车app软件下载 7

图6:删除职分

北京赛车app软件下载 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严刻形式)严俊编写翻译准绳。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的名字到数组中。事务函数的第三个参数是一个形式。

借使事情央求可用,您就能够通过传递要求的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的上下文中使用。那篇随笔宣布时,还尚无浏览器完结的一块儿格式的IndexedDB
API。

早晚要保管代码在任何函数域外对厂家特定的indexedDB, IDBTransaction, and
IDBKeyRange实例实行了标准化且使用了严苛情势。那允许你制止浏览器错误,当在strict
mode下剖析脚本时,它不会允许你对那多少个对象重新赋值。

您必须要确认保证只传递正整数的版本号给数据库。传递到版本号的小数值会四舍五入。由此,假如您的数据库近来版本1,您准备访谈1.2本子,upgrade-needed事件不会触发,因为版本号最后评估是完全一样的。

当即履行函数表明式(IIFE)有的时候叫做不相同的名字。不常能够见到那般的代码社团办公室法,它称为self-executing
anonymous functions(自推行无名氏函数)或self-invoked anonymous
functions(自调用无名函数)。为进一步解释那么些名称相关的意图和含义,请阅读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 收藏
评论

在 二〇〇八 年 1十二月 18 日,W3C发表弃用Web
SQL数据库典型。那也正是建议互连网开拓职员不要再使用这种技艺了,该规范也不会再拿走新的更新,何况不激励浏览器中间商扶助该工夫。

至于小编:cucr

北京赛车app软件下载 9

新浪果壳网:@hop_ping
个人主页 ·
我的稿子 ·
17

北京赛车app软件下载 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_W奥迪Q5ITE事务,并拿走大家对象存款和储蓄的援用。

 

既然使用有权访谈对象存储,大家就能够透过基础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中的新添效果与利益。互连网数据库托管并留存在客商的浏览器内。只要让开拓人士通过抬高的查询功用创造应用,就足以预知到…

发表评论

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