图片 10

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

前面三个的数据库:IndexedDB入门

2014/12/27 · 未分类 · IndexedDB

本文由 伯乐在线 –
cucr
翻译,黄利民
校稿。未经许可,禁止转载!
塞尔维亚共和国(Republic of Serbia卡塔尔国语出处:www.codemag.com。招待参与翻译组。

应用程序需求多少。对好多Web应用程序来讲,数据在劳务器端组织和管理,客商端通过网络伏乞获取。随着浏览器变得尤为有力量,因而可选择在浏览器存款和储蓄和垄断应用程序数据。

正文向你介绍名字为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管理程序 若果你想翻新数据库(创立,删除或改变数据库卡塔 尔(英语:State of Qatar),那么您必须要落到实处onupgradeneeded管理程序,令你可以在数据库中做别的改换。
在“onupgradeneeded”管理程序中是足以改造数据库的组织的唯大器晚成地点。
 
成立和增加数据到表:
IndexedDB使用对象存款和储蓄来囤积数据,并非通过表。
每当三个值存款和储蓄在对象存款和储蓄中,它与三个键相关联。
它同意大家创立的其余对象存储索引。
索引允许大家拜望存储在指标存款和储蓄中的值。
上面包车型地铁代码呈现了如何成立对象存款和储蓄并插入预先筹划好的多寡:

JavaScript
Code复制内容到剪贴板

  1. request.onupgradeneeded = function(event) {   
  2. var objectStore = event.target.result.createObjectStore(“users”, {keyPath: “id”});
      
  3. for (var i in userData) {   
  4. objectStore.add(userData[i]);    
  5. }   
  6. }  

大家利用createObjectStore(卡塔 尔(阿拉伯语:قطر‎方法创造四个指标存款和储蓄。 此方法选择多少个参数:

  • 存款和储蓄的称号和参数对象。
    在那,我们有二个名叫”users”的靶子存款和储蓄,并定义了key帕特h,那是指标唯黄金时代性的个性。
    在那地,大家应用“id”作为keyPath,那一个值在指标存款和储蓄中是唯生机勃勃的,大家必需保险该“ID”的性质在目的存款和储蓄中的每一种对象中留存。
    黄金时代旦创造了对象存款和储蓄,大家得以开头接纳for循环加多数据进去。
     
    手动将数据增加到表:
    小编们能够手动增添额外的数量到数据库中。

JavaScript
Code复制内容到剪贴板

  1. function Add() {   
  2. var request = db.transaction([“users”], “readwrite”).objectStore(“users”)
      
  3. .add({ id: “3”, name: “Gautam”, age: 30, email: “[email protected]” });
      
  4.     
  5. request.onsuccess = function(e) {   
  6. alert(“Gautam has been added to the database.”);   
  7. };   
  8.     
  9. request.onerror = function(e) {   
  10. alert(“Unable to add the information.”);    
  11. }   
  12.     
  13. }  

后面我们在数据库中做别的的CRUD操作(读,写,改善卡塔 尔(英语:State of Qatar),必得使用专业。
该transaction()方法是用来钦命我们想要举行事务管理的对象存款和储蓄。
transaction()方法接收3个参数(第1个和第多少个是可选的卡塔 尔(阿拉伯语:قطر‎。
第四个是大家要拍卖的对象存款和储蓄的列表,第贰个钦点大家是还是不是要只读/读写,第八个是本子变化。
 
从表中读取数据 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事务管理。可是结果就区别

图片 2

测量试验的时候b.html中或然不会立即有出口,因为indexedDB正忙着管理a.html东西,b.html事务丢在了职业丢队列中等待。可是无论怎样,输出结果也不会是1以此值。因为indexedDB的一丁点儿管理单位是工作,而不是localStorage那样以表达式为单位。那样假诺把lock和unlock之间必要管理的东西放入叁个业务中就能够完结。其它,浏览器对indexedDB的支撑不及localStorage,所以选取时还得思谋浏览器宽容。

那篇作品首要介绍了入木八分分析HTML5中的IndexedDB索引数据库,满含事务锁等基本效能的连锁使…

简介

统筹指南

IndexedDB的架构很像在有个别风靡的劳务器端NOSQL数据库实现中的设计指南类型。面向对象数据经过object
stores(对象仓库卡塔 尔(英语:State of Qatar)进行长久化,全数操作基于伏乞同时在业务限定内施行。事件生命周期使您可以预知调节数据库的铺排,错误通过怪诞冒泡来使用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和魅族部分接济。即便这一个列表的跟随者是令人鼓劲的,但它从不报告全体轶事。

图片 4

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

除非可怜新本子的Safari和iOS Safari
支持IndexedDB。据caniuse.com呈现,那仅占大概0.01%的天下浏览器接收。IndexedDB不是多个您以为能够理之当然获得扶持的今世Web
API,然则你将便捷会这么以为。

 

另风流浪漫种选取

浏览器援助本地数据库并非从IndexedDB才起来贯彻,它是在WebSQL兑现之后的风姿浪漫种新方式。相符IndexedDB,WebSQL是几个客户端数据库,但它充作多少个关周密据库的落到实处,使用结构化查询语言(SQL)与数据库通讯。WebSQL的历史充满了盘曲,但底线是还没主流的浏览器商家对WebSQL继续协理。

如果WebSQL实际上是叁个放弃的本事,为何还要提它呢?有意思的是,WebSQL在浏览器里获取加强的匡助。Chrome,
Safari, iOS Safari, and
Android 浏览器都扶植。其它,并非这几个浏览器的新式版本才提供协理,许多那些最新最棒的浏览器在此以前的本子也足以扶助。有意思的是,就算你为WebSQL增添扶持来支撑IndexedDB,你忽然意识,繁多浏览器厂商和版本成为辅助浏览器内置数据库的某种化身。

因此,如若你的应用程序真正须要叁个客商端数据库,你想要达到的最高端别的使用可能,当IndexedDB不可用时,只怕你的应用程序或者看起来需求选拔使用WebSQL来支持顾客端数据架构。固然文书档案数据库和关全面据库管理数占有猛烈的差距,但若是你有不利的悬空,就足以行使本地数据库构建多个应用程序。

IndexedDB的分歧的地方在于,您可以创建某些项目数据的对象存款和储蓄,然后只需将JavaScript对象留存在该存款和储蓄中就可以。每一个对象存款和储蓄都足以有目录的集合,那样就能够张开快速的询问和迭代。

IndexedDB是不是相符本身的应用程序?

前几天最首要的标题:“IndexedDB是不是符合自个儿的应用程序?“像以往同生龙活虎,答案是洗颈就戮的:“视意况而定。“首先当您策动在客商端保存数据时,你会设想HTML5本地存款和储蓄。本地存款和储蓄获得大范围浏览器的支撑,有那么些轻巧使用的API。简单有其优势,但其缺点是不能支撑复杂的追寻战术,存款和储蓄大量的数目,并提供专门的工作帮衬。

IndexedDB是三个数据库。所以,当你想为客户端做出决定,思谋你什么在服务端选用贰个长久化媒介物的数据库。你也许会问本身某些主题材料来接济调节顾客端数据库是或不是契合您的应用程序,包蕴:

  • 你的顾客通过浏览器访谈您的应用程序,(浏览器卡塔尔国扶植IndexedDB API吗 ?
  • 你要求仓库储存大批量的数量在顾客端?
  • 您需求在一个大型的多少集结中赶快牢固单个数总局?
  • 您的架构在客商端需求职业辅助吗?

假使您对内部的其它问题回答了“是的”,很有望,IndexedDB是您的应用程序的叁个很好的候选。

 

使用IndexedDB

现在,你已经有时机熟知了有的的完整概念,下一步是发端落到实处基于IndexedDB的应用程序。第二个步骤须求统黄金年代IndexedDB在分裂浏览器的贯彻。您能够超轻易地增进种种商家个性的取舍的检查,同期在window对象上把它们设置为合法对象肖似的名称。上面包车型大巴清单展现了window.indexedDB,window.IDBTransaction,window.IDBKeyRange的末段结果是什么样都被更新,它们被安装为对应的浏览器的一定完成。

JavaScript

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

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

前几天,各种数据库相关的大局对象具有正确的版本,应用程序能够筹算利用IndexedDB开端专业。

IndexedDB 还打消了行业内部查询语言(
SQL)的定义,替代它的是指向性索引的查询,那样能够生出一个指南针,用于在结果集以内迭代。

利用概述

在本教程中,您将学习如何创造叁个行使IndexedDB存款和储蓄数据的模块化JavaScript应用程序。为了驾驭应用程序是哪些做事的,参照他事他说加以考查图4,它陈说了任务应用程序处于空白状态。从这里你可感到列表加多新任务。图5体现了录入了多少个职务到系统的镜头。图6出示怎么删除二个职务,图7展现了正在编写制定任务时的应用程序。

图片 5

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

图片 6

图5:职分列表

图片 7

图6:删除义务

图片 8

图7:编辑职分
现行反革命你了解的应用程序的功用,下一步是从头为网站铺设根底。

 

铺设基本功

那些事例从落实如此八个模块早先,它承当从数据库读取数据,插入新的靶子,更新现成对象,删除单个对象和提供在三个object
store删除全部目的的选项。那一个事例达成的代码是通用的数目访问代码,您能够在任何object
store上利用。

本条模块是由此一个马上实施函数表明式(IIFE)完毕,它选用对象字面量来提供组织。下边包车型大巴代码是模块的摘要,表达了它的主干结构。

JavaScript

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

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

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

其一模块的代码应用IIFE,通过传递window对象来确定保证模块的适龄范围。使用use
strict确定保障那么些函数的代码函数是比照(javascript严苛情势卡塔 尔(英语:State of Qatar)严酷编写翻译法则。db对象作为与数据库交互作用的有着函数的机要容器。最终,window对象检查app的实例是还是不是留存,要是存在,模块使用当前实例,借使不真实,则开创二个新目的。豆蔻梢头旦app对象成功重返或创设,db对象附加到app对象。

正文的其他部分将代码加多到db对象内(在implementation
here会
讨论),为应用程序提供一定于数据库的逻辑。由此,如您所见本文前边的豆蔻梢头对中定义的函数,动脑父db对象活动,但全数任何职能都以db对象的分子。完整的数据库模块列表见项目清单2。

本课程只是举了一个实际上示例,告诉您针对编写为利用WebSQL
的现存应用怎么样使用IndexedDB。 

Implementing Database-Specific Code

对数据库的每一个操作关联着贰个先决条件,即有贰个开拓的数据库。当数据库正在被打开时,通过检查数据库版本来推断数据库是不是要求其它退换。上面包车型客车代码彰显了模块怎样追踪当前版本,object
store名、某成员(保存了假若数据库展开恳求实现后的数据库当前实例卡塔尔国。

JavaScript

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

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

在那间,数据库张开须求产生时,模块乞请版本1数据库。若是数据库不真实,或许版本小于1,upgrade
needed事件在开垦央浼完毕前触发。那个模块被设置为只使用二个object
store,所以名字直接定义在这里间。最终,实例成员被创造,它用来保存黄金年代旦打开诉求完毕后的数据库当前实例。

接下去的操作是实现upgrade
needed事件的事件管理程序。在这里边,检查当前object
store的名字来判断央求的object store名是还是不是留存,要是子虚乌有,成立object
store。

JavaScript

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

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

在这里个事件管理程序里,通过事件参数e.target.result来访谈数据库。当前的object
store名称的列表在_db.objectStoreName的字符串数组上。今后,要是object
store空中楼阁,它是透过传递object
store名称和store的键的概念(自增,关联到数码的ID成员卡塔 尔(英语:State of Qatar)来创设。

模块的下八个功用是用来捕获错误,错误在模块不一样的乞求创设时冒泡。

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的名字到数组中。事务函数的第1个参数是一个格局。

大器晚成经事情恳求可用,您就足以因而传递供给的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(自举办佚名函数卡塔尔或self-invoked anonymous
functions(自调用无名氏函数卡塔尔。为更为分解这个名称相关的寻思和意义,请阅读Ben
Alman的稿子Immediately Invoked Function Expression (IIFE) 。

Listing 1: Implementing the getAll function

JavaScript

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

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

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

JavaScript

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

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

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

JavaScript

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

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

Listing 3: Full HTML source (index.html)

JavaScript

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

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

赞 1 收藏
评论

在 二零零六 年 12月 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) {