后边叁个的数据库:IndexedDB入门

2014/12/27 · 未分类 · IndexedDB

本文由 伯乐在线 –
cucr
翻译,黄利民
校稿。未经许可,幸免转发!
印度语印尼语出处:www.codemag.com。应接参与翻译组。

应用程序须要多少。对绝大大多Web应用程序来讲,数据在服务器端协会和保管,顾客端通过互连网央浼获取。随着浏览器变得更其有技巧,由此可挑选在浏览器存款和储蓄和调整应用程序数据。

本文向你介绍名叫IndexedDB的浏览器端文档数据库。使用lndexedDB,你能够透过惯于在劳务器端数据库差不离等同的不二等秘书诀制造、读取、更新和删除大批量的记录。请使用本文中可职业的代码版本去体会,完整的源代码能够透过GitHub库找到。

读到本学科的尾声时,你将熟谙IndexedDB的基本概念以至怎么样落到实处叁个行使IndexedDB实行总体的CRUD操作的模块化JavaScript应用程序。让我们稍事亲密IndexedDB并起先吧。

什么是IndexedDB

肖似的话,有两种分裂品类的数据库:关系型和文书档案型(也可以称作NoSQL或对象)。关周详据库如SQL
Server,MySQL,Oracle的多少存款和储蓄在表中。文书档案数据库如MongoDB,CouchDB,Redis将数据集作为个人对象存款和储蓄。IndexedDB是多少个文书档案数据库,它在一起内放置浏览器中的贰个沙盒碰到中(强制根据(浏览器卡塔尔国同源攻略)。图1体现了IndexedDB的数码,突显了数据库的结构

home88一必发 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操作(读,写,校订卡塔 尔(英语:State of Qatar),必需使用职业。
该transaction()方法是用来钦点大家想要举行事务管理的对象存款和储蓄。
transaction()方法采用3个参数(第一个和第两个是可选的卡塔 尔(英语:State of Qatar)。
第二个是大家要管理的对象存款和储蓄的列表,第三个钦点我们是或不是要只读/读写,第多个是本子变化。
 
从表中读取数据 get()方法用于从目的存款和储蓄中搜寻数据。
大家前面曾经安装对象的id作为的key帕特h,所以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事务管理。可是结果就分歧

home88一必发 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名字的数组到创制工作节制的函数来定义。

创立工作的第4个参数是职业格局。当呼吁三个事务时,必须决定是信守只读还是读写形式乞求访谈。事务是能源密集型的,所以假令你不供给纠正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事件。

home88一必发 3

图2:IndexedDB展开央求的生命周期

富有与数据库的互相起始于二个展开的伸手。试图展开数据库时,您必需传递三个被呼吁数据库的本子号的整数值。在开垦央浼时,浏览器比较你传入的用于展开须求的版本号与事实上数据库的版本号。如若所央浼的版本号高于浏览器中当前的版本号(恐怕现在从未有过存在的数据库),upgrade
needed事件触发。在uprade
need事件时期,你有机会通过抬高或移除stores,键和索引来垄断(monopoly卡塔 尔(英语:State of Qatar)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和OPPO部分帮助。即便那么些列表的拥护者是冲动的,但它并未有告知全数遗闻。

home88一必发 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是八个数据库。所以,当您想为客商端做出决定,考虑你什么样在服务端选拔二个持久化媒质的数据库。你可能会问自个儿有个别难题来支援调节顾客端数据库是不是适合您的应用程序,包蕴:

  • 您的客户通过浏览器访谈您的应用程序,(浏览器卡塔 尔(英语:State of Qatar)帮助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突显了正在编纂职责时的应用程序。

home88一必发 5

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

home88一必发 6

图5:义务列表

home88一必发 7

图6:删除任务

home88一必发 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的名字到数组中。事务函数的第贰个参数是贰个形式。

万一事情诉求可用,您就足以因此传递要求的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(游标卡塔 尔(英语:State of Qatar)分别设置值。为数据库游标设置游标变量允许迭代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(自施行无名氏函数卡塔 尔(英语:State of Qatar)或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 = []home88一必发 ,;
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 收藏
评论

在 2008 年 7月 18 日,W3C发表弃用Web
SQL数据库标准。那相当于建议网络开拓人士不要再采用这种手艺了,该标准也不会再赢得新的翻新,而且不鼓劲浏览器供应商援助该本事。

至于我:cucr

home88一必发 9

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

home88一必发 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单次调用创立对象存款和储蓄。该方法会命名存款和储蓄以致参数对象。参数对象超重大,它可让您定义首要的可选属性。就我们来说,定义key帕特h属性可让单个对象在积累中具有唯大器晚成性。本例中的该属性为“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猎豹CS6ITE事务,并赢得我们对象存储的援用。

 

既是使用有权访谈对象存款和储蓄,大家就能够通过底蕴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)

}对于某些钦命的待办事项,大家只必要获得文本并为其构建顾客分界面(富含“删除”按键,以便除去待办事项卡塔 尔(英语:State of Qatar)。

 

第 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.add伊夫ntListener(“DOMContentLoaded”, init,
false);那必要用到可将数据抽出 DOM的函数,即
html5rocks.indexedDB.addTodo方法: 

 

[html] 

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

IndexedDB是HTML5中的新扩充效果与利益。互连网数据库托管并留存在客户的浏览器内。只要让开拓人士通过丰富的询问功能创造应用,就能够预以为…

相关文章