后边二个的数据库: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的多少,展现了数据库的构造

图片 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个参数(第叁个和第四个是可选的卡塔 尔(英语:State of Qatar)。
第叁个是大家要拍卖的对象存款和储蓄的列表,第叁个钦点大家是或不是要只读/读写,第多个是本子变化。
 
从表中读取数据 get()方法用于从指标存款和储蓄中找寻数据。
我们前边早就设置对象的id作为的keyPath,所以get()方法将追寻具备相像id值的目的。
上边的代码将赶回大家命名叫“Bidulata”的靶子:

JavaScript
Code复制内容到剪贴板

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

 
从表中读取全体数据
上面包车型地铁点子找寻表中的全体数据。
这里大家使用游标来搜索对象存款和储蓄中的全体数据:

JavaScript
Code复制内容到剪贴板

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

该openCursor()用于遍历数据库中的多少个记录。
在continue()函数中持续读取下一条记下。
剔除表中的笔录 上边包车型客车章程从目的中删去记录。

JavaScript
Code复制内容到剪贴板

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

作者们要将对象的keyPath作为参数字传送递给delete()方法。
WEB应用在用户浏览器端存储数据,其中各行存储了用户待办事项数据的集合。 
聊起底代码
上面包车型客车诀要从指标源中删除一条记下:

JavaScript
Code复制内容到剪贴板

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

localStorage是不带lock功效的。那么要兑现前端的数目共享何况须求lock功效那就须要接受其余本储存形式,比如indexedDB。indededDB使用的是事务管理的建制,那实在正是lock功效。
  做那些测量检验须要先简单的卷入下indexedDB的操作,因为indexedDB的接二连三相比麻烦,并且八个测验页面都供给用到

JavaScript
Code复制内容到剪贴板

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

把localStorage换到了indexedDB事务管理。但是结果就分化

图片 2

测验的时候b.html中大概不会立马有出口,因为indexedDB正忙着管理a.html东西,b.html事务丢在了政工丢队列中等待。可是无论怎么着,输出结果也不会是1那一个值。因为indexedDB的细小管理单位是工作,并不是localStorage那样以表明式为单位。那样后生可畏旦把lock和unlock之间需求管理的东西归入一个政工中就可以兑现。别的,浏览器对indexedDB的扶持不及localStorage,所以接纳时还得思索浏览器包容。

那篇小说首要介绍了深远深入分析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事件。

图片 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和HUAWEI部分帮忙。即便那些列表的维护者是欢娱的,但它没有报告全体轶事。

图片 4

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

除非足够新本子的Safari和iOS Safari
扶植IndexedDB。据caniuse.com彰显,那只占差相当的少0.01%的全世界浏览器选取。IndexedDB不是五个你以为能够理所必然获得援救的现代Web
API,可是你将高速会这么感到。

 

另风流倜傥种选取

浏览器援助本地数据库并不是从IndexedDB才起来兑现,它是在WebSQL达成之后的大器晚成种新议程。近似IndexedDB,WebSQL是三个客户端数据库,但它看作一个关周到据库的贯彻,使用结构化查询语言(SQL)与数据库通讯。WebSQL的野史充满了盘曲,但底线是从未有过主流的浏览器商家对WebSQL继续扶助。

假定WebSQL实际上是三个放弃的本领,为何还要提它呢?有意思的是,WebSQL在浏览器里拿到稳步的支撑。Chrome,
Safari, iOS Safari, and
Android 浏览器都帮忙。其它,并非那些浏览器的摩登版本才提供支撑,好多那几个新型最棒的浏览器早前的版本也能够支撑。风趣的是,假诺您为WebSQL增加扶助来扶助IndexedDB,你忽然意识,大多浏览器厂家和本子成为支撑浏览器内置数据库的某种变身。

由此,如若你的应用程序真正需求二个顾客端数据库,你想要达到的最高等别的使用恐怕,当IndexedDB不可用时,大概你的应用程序恐怕看起来需求选拔采用WebSQL来补助客户端数据框架结构。尽管文书档案数据库和关全面据库管理数据有简单来说的异样,但如若你有科学的虚幻,就足以行使当地数据库营造三个应用程序。

IndexedDB的不一样之处在于,您能够创设有个别项目数据的靶子存储,然后只需将JavaScript对象留存在该存款和储蓄中就可以。每一种对象存储都能够有目录的聚众,那样就能够扩充高效的查询和迭代。

IndexedDB是不是顺应自身的应用程序?

现在最要害的题材:“IndexedDB是或不是顺应本身的应用程序?“像往常一样,答案是必定的:“视景况而定。“首先当您策动在客商端保存数据时,你会捏造HTML5地点存款和储蓄。本地存款和储蓄获得大规模浏览器的支撑,有不行便于使用的API。简单有其优势,但其瑕玷是不也许支撑复杂的探求计谋,存款和储蓄大批量的多寡,并提供专门的学业支持。

IndexedDB是贰个数据库。所以,当您想为客商端做出决定,思量你什么样在服务端接纳叁个长久化介质媒质的数据库。你大概会问自身有个别难题来提携调控顾客端数据库是还是不是符合你的应用程序,包罗:

  • 你的客商通过浏览器访谈您的应用程序,(浏览器卡塔 尔(阿拉伯语:قطر‎协理IndexedDB API吗 ?
  • 您需求仓库储存大批量的数额在客商端?
  • 您须求在二个特大型的数据集结中相当的慢牢固单个数分公司?
  • 你的架构在顾客端须求专门的学业辅助啊?

设若你对内部的此外难题答疑了“是的”,很有相当大可能率,IndexedDB是你的应用程序的贰个很好的候选。

 

使用IndexedDB

今后,你早本来就有空子纯熟了部分的完好概念,下一步是从头贯彻基于IndexedDB的应用程序。首个步骤须要统豆蔻梢头IndexedDB在差异浏览器的贯彻。您可以超轻易地抬高各个厂家性格的取舍的检讨,同期在window对象上把它们设置为合法对象相像的称号。下边包车型客车清单呈现了window.indexedDB,window.IDBTransaction,window.IDBKeyRange的终极结果是哪些都被更新,它们被设置为对应的浏览器的特定完成。

JavaScript

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

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

前天,每个数据库相关的全局对象具备精确的本子,应用程序能够希图利用IndexedDB带头工作。

IndexedDB 还撤消了正式查询语言(
SQL)的概念,替代它的是对准索引的查询,那样能够发生三个指南针,用于在结果集以内迭代。

利用概述

在本教程中,您将学习如何创建二个接收IndexedDB存款和储蓄数据的模块化JavaScript应用程序。为了打探应用程序是什么样行事的,仿效图4,它描述了任务应用程序处于空白状态。从这里你可感觉列表增加新职务。图5来得了录入了多少个职责到系统的镜头。图6彰显怎么删除多少个任务,图7展现了正在编写制定任务时的应用程序。

图片 5

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

图片 6

图5:职务列表

图片 7

图6:删除任务

图片 8

图7:编辑职分
未来您熟知的应用程序的法力,下一步是始于为网址铺设底工。

 

铺设幼功

其大器晚成例子从贯彻如此贰个模块初叶,它担任从数据库读取数据,插入新的指标,更新现有对象,删除单个对象和提供在二个object
store删除全部指标的选项。这几个例子完结的代码是通用的多少访谈代码,您能够在任何object
store上行使。

本条模块是因而叁个任何时候举办函数表明式(IIFE)完毕,它利用对象字面量来提供组织。上面包车型客车代码是模块的摘要,表达了它的大旨结构。

JavaScript

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

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

用这么的布局,能够使这么些应用程序的兼具逻辑封装在二个名叫app的单对象上。别的,数据库相关的代码在二个叫作db的app子对象上。

那一个模块的代码应用IIFE,通过传递window对象来有限帮衬模块的贴切范围。使用use
strict确定保证这么些函数的代码函数是遵守(javascript严酷形式卡塔 尔(英语:State of Qatar)严俊编写翻译法规。db对象作为与数据库交互作用的具有函数的显要容器。最终,window对象检查app的实例是还是不是留存,若是存在,模块使用当前实例,即便不设有,则创设三个新目的。风流洒脱旦app对象成功重返或创办,db对象附加到app对象。

正文的其他部分将代码增多到db对象内(在implementation
here会
评价),为应用程序提供特定于数据库的逻辑。因而,如您所见本文后边的局地中定义的函数,出主意父db对象活动,但全数别的职能都是db对象的积极分子。完整的数据库模块列表见清单2。

本学科只是举了二个其实示例,告诉您针对编写为运用WebSQL
的幸存应用怎么着利用IndexedDB。 

Implementing Database-Specific Code

对数据库的种种操作关联着一个先决条件,即有三个开垦的数据库。当数据库正在被张开时,通过检查数据库版本来剖断数据库是或不是供给任何更动。下边包车型大巴代码呈现了模块怎样追踪当前版本,object
store名、某成员(保存了假若数据库展开央浼完毕后的数据库当前实例卡塔 尔(英语:State of Qatar)。

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(自调用无名氏函数卡塔 尔(英语:State of Qatar)。为特别分解那么些名称相关的来意和含义,请阅读Ben
Alman的文章Immediately Invoked Function Expression (IIFE) 。

Listing 1: Implementing the getAll function

JavaScript

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

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

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

JavaScript

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

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

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

JavaScript

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

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

Listing 3: Full HTML source (index.html)

JavaScript

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

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

赞 1 收藏
评论

在 二零零六 年 6月 18 日,W3C发表弃用Web
SQL数据库规范。那也便是提出互连网开垦人士不要再接收这种本领了,该专门的学问也不会再拿到新的换代,何况不鼓舞浏览器中间商支持该手艺。

至于小编:cucr

图片 9

果壳网天涯论坛:@hop_ping
个人主页 ·
笔者的篇章 ·
17

图片 10

 

代替的是
IndexedDB,本学科的大旨是开辟人士应接收这种数据存款和储蓄在客商端上囤积数据并张开操作。

 

各大主流浏览器(包括Chrome浏览器、Safari、Opera等卡塔 尔(阿拉伯语:قطر‎和差非常少全部基于Webkit的移动设备均扶植WebSQL,况且很有望在可预感的前途气势磅礴提供支撑。

 

先决条件

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

 

[html] 

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

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

在大多状态下,假若您使用的是索引型数据库,那么就能够采纳异步API。异步API是非堵塞系统,因而不会透过再次回到值获得数量,而是得到传递到钦赐回调函数的多少。

 

通过 HTML
支持IndexedDB是事务性的。在作业之外是力不胜任推行命令或张开指针的。事务富含如下类型:读/写作业、只读事务和快速照相事务。在本教程中,大家使用的是读/写作业。

 

第 1步:张开数据库

你必得先开垦数据库,技艺对其开展操作。 

 

[html]

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

 

html5rocks.indexedDB.open = function() {

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

 

  request.onsuccess = function(e) {

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

    // Do some more stuff in a minute

  };

 

  request.onfailure = html5rocks.indexedDB.onerror;

};大家已开发名字为“todos”的数据库,并已将其分配给html5rocks.indexedDB对象中的db变量。现在大家能够在全部课程中应用此变量来引用大家的数据库。

 

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

您一定要在“SetVersion”事务内创制对象存款和储蓄。小编还未介绍setVersion,那是一个优质首要的点子,那是代码中唯风流倜傥能够供你创设对象存储和目录的地点。

 

[html]

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

  var request = indexedDB.open(“todos”,

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

 

  request.onsuccess = function(e) {

    var v = “1.0”;

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

    var db = html5rocks.indexedDB.db;

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

    if(v!= db.version) {

      var setVrequest = db.setVersion(v);

 

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

      setVrequest.onfailure = html5rocks.indexedDB.onerror;

      setVrequest.onsuccess = function(e) {

        var store = db.createObjectStore(“todo”,

          {keyPath: “timeStamp”});

 

        html5rocks.indexedDB.getAllTodoItems();

      };

    }

 

    html5rocks.indexedDB.getAllTodoItems();

  };

 

  request.onfailure = html5rocks.indexedDB.onerror;

}上述代码其实有成都百货上千职能。大家在
API中定义了“open”方法,调用此方法就能够展开“todos”数据库。展开必要不是当下实践的,而是再次回到IDBRequest。要是当前函数存在,则会调用indexedDB.open方法。这与大家比比都已经钦赐异步回调的措施略有不一致,不过大家在回调推行前,有机遇向IDBRequest对象附加大家友好的监听器。

 

风流浪漫旦展开哀告成功了,大家的
onsuccess回调就能够奉行。在那回调中,大家应反省数据库版本,如若与预期版本不符,则调用“setVersion”。

 

setVersion
是代码中并世无两能让我们转移数据库结构的地点。在setVersion中,我们能够创设和删除对象存款和储蓄,甚至创设和删除索引。调用setVersion可回到IDBRequest对象,供大家在里面附加回调。假设成功了,大家就初阶创制对象存储。

 

由此对
createObjectStore单次调用创制对象存款和储蓄。该方法会命名存款和储蓄以致参数对象。参数对象拾分主要,它可让您定义首要的可选属性。就大家来讲,定义keyPath属性可让单个对象在蕴藏中有着唯大器晚成性。本例中的该属性为“timeStamp”。objectStore中积存的种种对象都一定要有“timeStamp”。

 

开创了目的存款和储蓄后,大家调用 getAllTodoItems方法。

 

第 3步:向目的存款和储蓄添加多少

咱俩要营造的是待办事项列表微处理机,因而必定要能力所能达到向数据库中增多待办事项。方法如下:

 

[html] 

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

  var db = html5rocks.indexedDB.db;

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

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

  var request = store.put({

    “text”: todoText,

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

  });

 

  request.onsuccess = function(e) {

    // Re-render all the todo’s

    html5rocks.indexedDB.getAllTodoItems();

  };

 

  request.onerror = function(e) {

    console.log(e.value);

  };

};addTodo方法特轻便,大家率先获得数据库对象的快速援引,开端化READ_WENVISIONITE事务,并得到大家对象存储的援引。

 

既是使用有权访谈对象存款和储蓄,大家就足以由此功底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(时间原点后的别的时刻卡塔 尔(英语:State of Qatar),那样就能够再次回到全体数据。

 

最近我们有了政工、对要查询的蕴藏的征引以至要迭代的节制。剩下的办事正是开发指针并附加“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.addEventListener(“DOMContentLoaded”, init,
false);那亟需用到可将数据抽取 DOM的函数,即
html5rocks.indexedDB.addTodo方法: 

 

[html] 

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

IndexedDB是HTML5中的新扩展效果与利益。网络数据库托管并留存在顾客的浏览器内。只要让开采人士通过增加的查询作用创建应用,就足以预感觉…

相关文章