澳门新浦京娱乐场网站-www.146.net-新浦京娱乐场官网
做最好的网站

澳门新浦京娱乐场网站深深深入分析HTML5中的In

前者的数据库:IndexedDB入门

2014/12/27 · 未分类 · IndexedDB

本文由 伯乐在线 - cucr 翻译,黄利民 校稿。未经许可,禁止转发!
英文出处:www.codemag.com。招待参预翻译组。

应用程序需求多少。对大诸多Web应用程序来讲,数据在劳动器端协会和治本,客户端通过网络请求获取。随着浏览器变得越发有技艺,因而可接纳在浏览器存款和储蓄和决定应用程序数据。

本文向您介绍名叫IndexedDB的浏览器端文书档案数据库。使用lndexedDB,你可以通过惯于在服务器端数据库差不多等同的措施成立、读取、更新和删除大量的记录。请使用本文中可职业的代码版本去体会,完整的源代码能够通过GitHub库找到。

读到本学科的末尾时,你将熟谙IndexedDB的基本概念以及怎样兑现2个运用IndexedDB实施总体的CRUD操作的模块化JavaScript应用程序。让我们多少亲近IndexedDB并伊始吧。

什么是IndexedDB

一般的话,有三种分化门类的数据库:关系型和文档型(也称之为NoSQL或对象)。关周到据库如SQL Server,MySQL,Oracle的数据存储在表中。文书档案数据库如MongoDB,CouchDB,Redis将数据集作为个体对象存款和储蓄。IndexedDB是1个文书档案数据库,它在一点一滴内停放浏览器中的七个沙盒情形中(强制依据(浏览器)同源战术)。图一显得了IndexedDB的多少,体现了数据库的构造

澳门新浦京娱乐场网站 1

图一:开拓者工具查看三个object store

全套的IndexedDB API请参照他事他说加以调查完整文书档案

简介

深入分析HTML5中的IndexedDB索引数据库,html5indexeddb

那篇小说主要介绍了深深深入分析HTML5中的IndexedDB索引数据库,包蕴事务锁等基本功效的相关应用示例,须要的相爱的人能够参照下

介绍 IndexedDB是HTML五 WEB数据库,允许HTML伍WEB应用在用户浏览器端存款和储蓄数据。对于利用来讲IndexedDB特别有力、有用,能够在客户端的chrome,IE,Firefox等WEB浏览器中蕴藏大批量数额,下边简介一下IndexedDB的基本概念。
 
什么是IndexedDB IndexedDB,HTML五新的数据存款和储蓄,能够在客户端存款和储蓄、操作数据,可以使利用加载地越来越快,越来越好地响应。它分化于关系型数据库,具备数据表、记录。它影响着我们设计和创制应用程序的格局。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()方法有多少个参数:
一.第一个参数是数据库名称,它会检查实验名叫"databaseName"的数据库是还是不是已经存在,假若存在则展开它,不然创立新的数据库。
二.次之个参数是数据库的版本,用于用户更新数据库结构。
 
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个是咱们要管理的对象存款和储蓄的列表,第3个钦点我们是还是不是要只读/读写,第多个是本子变化。
 
从表中读取数据 get()方法用于从目的存款和储蓄中搜寻数据。 大家前面曾经安装对象的id作为的keyPath,所以get()方法将追寻具有同样id值的对象。 上面包车型大巴代码将赶回大家命名字为“Bidulata”的靶子:

JavaScript Code复制内容到剪贴板

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

 
从表中读取全部数据
上边的办法找寻表中的全体数据。 这里大家应用游标来搜寻对象存款和储蓄中的全部数据:

JavaScript Code复制内容到剪贴板

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

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

JavaScript Code复制内容到剪贴板

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

咱俩要将目的的keyPath作为参数字传送递给delete()方法。
 
最后代码
下边的法子从指标源中删除一条记下:

JavaScript Code复制内容到剪贴板

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

localStorage是不带lock功效的。那么要促成前端的数据共享并且需求lock成效那就供给使用其余本积累方式,比方indexedDB。indededDB使用的是事务管理的建制,那实在正是lock功效。
  做那个测试须要先轻巧的包裹下indexedDB的操作,因为indexedDB的总是相比较劳碌,而且多个测试页面都亟待用到

JavaScript Code复制内容到剪贴板

  1. //db.js   
  2. //封装事务操作   
  3. IDBDatabase.prototype.doTransaction=function(f){   
  4.   f(this.transaction(["Obj"],"readwrite").objectStore("Obj"));   
  5. };   
  6. //连接数据库,成功后调用main函数   
  7. (function(){   
  8.   //张开数据库   
  9.   var cn=indexedDB.open("TestDB",1);   
  10.   //创制数量对象   
  11.   cn.onupgradeneeded=function(e){   
  12.     e.target.result.createObjectStore("Obj");   
  13.   };   
  14.   //数据库连接成功   
  15.   cn.onsuccess=function(e){   
  16.     main(e.target.result);   
  17.   };   
  18. })();   
  19.   接着是几个测试页面   
  20. <script src="db.js"></script>  
  21. <script>  
  22. //a.html   
  23. function main(e){   
  24.   (function callee(){   
  25.     //开头二个工作   
  26.     e.doTransaction(function(e){   
  27.       e.put(1,"test"); //设置test的值为1   
  28.       e.put(2,"test"); //设置test的值为2   
  29.     });   
  30.     setTimeout(callee);   
  31.   })();   
  32. };   
  33. </script>  
  34. <script src="db.js"></script>  
  35. <script>  
  36. //b.html   
  37. function main(e){   
  38.   (function callee(){   
  39.     //伊始2个业务   
  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索引数据库,包含事务锁等基本功效的相干使...

在做web开辟的时候,不经常候需求仓库储存一些缓存数据,幸免后一次做客的时候再度加载大量多少,假如只是存在session、cookies里面,会很影响进程,并且session和cookies存储的多少都相比较轻便,无法积累一些结构化的多寡,html五提供了一项比较实用的当地存款和储蓄才能IndexedDB,就像是安装在浏览器上的数据库同样,可是使用方法跟普通的数据库某个不同,完全使用js的艺术来兑现建设构造删除数据库以及数据的增加和删除改查。
<pre>
var version=version || 1,db;
//连接数据库(张开句柄)
var request=window.indexedDB.open('mydb',version);
request.onerror=function(e){ console.log(e.currentTarget.error.message); };
//连接成功后
request.onsuccess=function(e){
db=e.target.result;
//创设'数据表'students(应该叫object store,indexedDB中绝非表的定义,而是objectStore,二个数据库中得以涵盖多个objectStore
//objectStore是叁个心灵手巧的数据结构,能够存放各种类型数据。约等于说二个objectStore也正是一张表,里面积累的每条数据和3个键相关联。

html5 初试 indexedDB(推荐),html5indexeddb

indexedDB是积攒大批量结构化数据的API,demo中用到的是异步API,麻烦的就是全体对indexedDB的操作都会发生3个异步的‘请求’,只要熟识了API操作起来也很简短。

大要流程是如此

一.张开数据库

JavaScript Code复制内容到剪贴板

  1. var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;   
  2.   
  3. if ('webkitIndexedDB' in window) {   
  4.     window.IDBTransaction = window.webkitIDBTransaction;   
  5.     window.IDBKeyRange = window.webkitIDBKeyRange;   
  6. }   
  7. //那几个就不表明了   
  8.   
  9. var request = indexedDB.open("adsageIDB");  //open  : indexedDB唯有那四个办法  展开(数据库名)   
  10. request.onsuccess = function(e) { //异步   
  11.     var v = "1.00";   
  12.     var db = e.target.result;   
  13.   
  14.     if (v!= db.version) {   
  15.         var setVrequest = db.setVersion(v);   
  16.         setVrequest.onsuccess = function(e) { //异步   
  17.             if(db.objectStoreNames.contains("todo")) {   
  18.                 db.deleteObjectStore("todo");   
  19.             }   
  20.             var store = db.createObjectStore("todo", {keyPath: "adsid"});//onsuccess 后创制ObjectStore  暂且用到多个参数,数据库&&主键   
  21.         }   
  22.     }       
  23. }  

如此那般就 创设/连接 了二个数据库

二.创制交互对象 && 监听dom事件 && 管理多少

然后正是要操作数据库了

JavaScript Code复制内容到剪贴板

  1. //插入数据 一时半刻只插入一列    
  2. var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);//创建transaction    
  3. var store = trans.objectStore("todo");//创建Store   
  4. //要操作数据必须建构transaction 和 Store   
  5.   
  6. var data = {   
  7.     "text": todoText,   
  8.     "adsid": new Date().getTime()   
  9. };//三个小数目 adsid是主键   
  10.   
  11. var request = store.put(data); //‘强行’插入   
  12.   
  13. request.onsuccess = function(e) {   
  14.     //成功后进行一些操作   
  15. };   
  16.   
  17. request.onerror = function(e) {   
  18.     console.log("Error Adding: ", e);   
  19. };  

JavaScript Code复制内容到剪贴板

  1. //读取数据   
  2. var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);   
  3. var store = trans.objectStore("todo");   
  4.   
  5. var keyRange = IDBKeyRange.lowerBound(0);   
  6. var cursorRequest = store.openCursor(keyRange);   
  7. //这里运用指针cursor ,openCursor的参数 keyRange是遍历范围 仍可以加上遍历方向参数   
  8. //另一种格局是get() 这个就比较简单了直接store.get('键值')就行   
  9.   
  10. cursorRequest.onsuccess = function(e) {   
  11.     var result = e.target.result;   
  12.     if(!!result == false)   
  13.     return;   
  14.   
  15.     console.log(result.value);   
  16.     result.continue(); //循环读取全部数据   
  17. };  

JavaScript Code复制内容到剪贴板

  1. //删除数据   
  2. ...   
  3. store.delete('键值')   
  4. ...  

出了八个小demo

XML/HTML Code复制内容到剪贴板

  1. <!DOCTYPE html>  
  2. <html>  
  3.   <head>  
  4.     <script>  
  5.       var indexedDB = window.indexedDB || window.webkitIndexedDB ||   
  6.                       window.mozIndexedDB;   
  7.          
  8.       if ('webkitIndexedDB' in window) {   
  9.         windowwindow.IDBTransaction = window.webkitIDBTransaction;   
  10.         windowwindow.IDBKeyRange = window.webkitIDBKeyRange;   
  11.       }   
  12.          
  13.       adsageIDB = {};   
  14.       adsageIDB.db = null;   
  15.          
  16.       adsageIDB.onerror = function(e) {   
  17.         console.log(e);   
  18.       };   
  19.          
  20.       adsageIDB.open = function() {   
  21.         var request = indexedDB.open("adsageIDB");   
  22.          
  23.         request.onsuccess = function(e) {   
  24.           var v = "1.00";   
  25.           adsageIDB.db = e.target.result;   
  26.           var db = adsageIDB.db;   
  27.   
  28.           if (v!= db.version) {   
  29.             var setVrequest = db.setVersion(v);   
  30.          
  31.             setVrequest.onerror = adsageIDB.onerror;   
  32.             setVrequest.onsuccess = function(e) {   
  33.               if(db.objectStoreNames.contains("todo")) {   
  34.                 db.deleteObjectStore("todo");   
  35.               }   
  36.          
  37.               var store = db.createObjectStore("todo",   
  38.                 {keyPath: "adsid"});   
  39.          
  40.               adsageIDB.getAllTodoItems();   
  41.             };   
  42.           }   
  43.           else {   
  44.             adsageIDB.getAllTodoItems();   
  45.           }   
  46.         };   
  47.          
  48.         request.onerror = adsageIDB.onerror;   
  49.       }   
  50.          
  51.       adsageIDB.addTodo = function(todoText) {   
  52.         var db = adsageIDB.db;   
  53.         var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);   
  54.         var store = trans.objectStore("todo");   
  55.          
  56.         var data = {   
  57.           "text": todoText,   
  58.           "adsid": new Date().getTime()   
  59.         };   
  60.          
  61.         var request = store.put(data);   
  62.          
  63.         request.onsuccess = function(e) {   
  64.           adsageIDB.getAllTodoItems();   
  65.         };   
  66.          
  67.         request.onerror = function(e) {   
  68.           console.log("Error Adding: ", e);   
  69.         };   
  70.       };   
  71.          
  72.       adsageIDB.deleteTodo = function(id) {   
  73.         var db = adsageIDB.db;   
  74.         var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);   
  75.         var store = trans.objectStore("todo");   
  76.          
  77.         var request = store.delete(id);   
  78.          
  79.         request.onsuccess = function(e) {   
  80.           adsageIDB.getAllTodoItems();   
  81.         };   
  82.          
  83.         request.onerror = function(e) {   
  84.           console.log("Error Adding: ", e);   
  85.         };   
  86.       };   
  87.          
  88.       adsageIDB.getAllTodoItems = function() {   
  89.         var todos = document.getElementById("todoItems");   
  90.         todos.innerHTML = "";   
  91.          
  92.         var db = adsageIDB.db;   
  93.         var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);   
  94.         var store = trans.objectStore("todo");   
  95.          
  96.         var keyRange = IDBKeyRange.lowerBound(0);   
  97.         var cursorRequest = store.openCursor(keyRange);   
  98.          
  99.         cursorRequest.onsuccess = function(e) {   
  100.           var result = e.target.result;   
  101.           if(!!result == false)   
  102.             return;   
  103.          
  104.           renderTodo(result.value);   
  105.           result.continue();   
  106.         };   
  107.          
  108.         cursorRequest.onerror = adsageIDB.onerror;   
  109.       };   
  110.          
  111.       function renderTodo(row) {   
  112.         var todos = document.getElementById("todoItems");   
  113.         var li = document.createElement("li");   
  114.         var a = document.createElement("a");   
  115.         var t = document.createTextNode(row.text);   
  116.          
  117.         a.addEventListener("click", function() {   
  118.           adsageIDB.deleteTodo(row.adsid);   
  119.         }, false);   
  120.          
  121. 澳门新浦京娱乐场网站深深深入分析HTML5中的IndexedDB索引数据库,HTML五地点存款和储蓄。        a.textContent = " [删除]";   
  122.         li.appendChild(t);   
  123.         li.appendChild(a);   
  124.         todos.appendChild(li)   
  125.       }   
  126.          
  127.       function addTodo() {   
  128.         var todo = document.getElementById("todo");   
  129.         adsageIDB.addTodo(todo.value);   
  130.         todo.value = "";   
  131.       }   
  132.          
  133.       function init() {   
  134.         adsageIDB.open();   
  135.       }   
  136.          
  137.       window.addEventListener("DOMContentLoaded", init, false);   
  138.     </script>  
  139.   </head>  
  140.   <body>  
  141.     <ul id="todoItems"></ul>  
  142.     <input type="text" id="todo" name="todo" placeholder="adsageIDB text?" />  
  143.     <input type="submit" value="增添1个 IDB" onclick="addTodo(); return false;"/>  
  144.   </body>  
  145. </html>  

如上那篇html伍 初试 indexedDB(推荐)正是作者分享给我们的全体内容了,希望能给我们贰个参阅,也盼望我们多多帮忙帮客之家。

原稿地址:

初试 indexedDB(推荐),html五indexeddb indexedDB是积攒大量结构化数据的API,demo中用到的是异步API,麻烦的正是具备对indexedDB的操作都会时有发生壹...

统一策画标准

IndexedDB的架构很像在有些风靡的劳务器端NOSQL数据库完毕中的设计指南类型。面向对象数据经过object stores(对象货仓)进行长久化,全数操作基于请求同时在业务限制内推行。事件生命周期使您可见调控数据库的布置,错误通过荒谬冒泡来使用API管理。

IndexedDB是HTML5中的新添效益。网络数据库托管并留存在用户的浏览器内。只要让开垦职员通过抬高的询问作用创造应用,就能够预言到,将会油不过生能够同时在线和离线使用的流行互联网使用。

//我们得以应用每条记下中的有些钦赐字段作为键值(keyPath),也足以利用自动生成的星罗棋布数字作为键值(keyGenerator)
//也能够不点名。选用键的门类分歧,objectStore能够积存的数据结构也许有异样
if(!db.objectStoreNames.contains('students')){
db.createObjectStore('students',{keyPath:"id"});
}
var students=[{
id:1001,
name:"Byron",
age:24
},{
id:1002,
name:"Frank",
age:30
},{
id:1003,
name:"Aaron",
age:26
}];
var transaction=db.transaction('students','readwrite');
var store=transaction.objectStore('students');
//找到呼应‘表’ 插入数据
for(var i=0;i<students.length;i ){
store.add(students[i]);
}
};
//查询数据
function getDataByKey(db,dbName,value){
var transaction=db.transaction(dbName,'readwrite');
var store=transaction.objectStore(dbName);
var request=store.get(value);
request.onsuccess=function(e){ var student=e.target.result; console.log(student.name); };
}
//更新数据
function updateDataByKey(db,dbName,value){
var transaction=db.transaction(dbName,'readwrite');
var store=transaction.objectStore(dbName);
var request=store.get(value);
澳门新浦京娱乐场网站深深深入分析HTML5中的IndexedDB索引数据库,HTML五地点存款和储蓄。request.onsuccess=function(e){
var student=e.target.result;
student.age=35;
store.put(student);
};
}
</pre>

指标旅舍

object store是IndexedDB数据库的根基。假若您选择过关全面据库,常常能够将object store等价于一个数额库表。Object stores包含二个或四个目录,在store中依照1对键/值操作,那提供壹种高效稳固数据的诀要。

当您安顿二个object store,你不可能不为store选取贰个键。键在store中能够以“in-line”或“out-of-line”的主意存在。in-line键通过在数码对象上引用path来维系它在object store的唯一性。为了求证那或多或少,想想八个回顾电子邮件地址属性Person对象。您能够配备你的store使用in-line键emailAddress,它能确认保证store(长久化对象中的数据)的唯1性。别的,out-of-line键通过独立于数据的值识别唯一性。在这种景观下,你能够把out-of-line键比作3个整数值,它(整数值)在关周密据库中出任记录的主键。

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

 

据说事务

分歧于一些价值观的关全面据库的落实,每二个对数据库操作是在二个业务的前后文中推行的。事务限制1回影响2个或多少个object stores,你通过传播1个object store名字的数组到成立职业限制的函数来定义。

创制职业的第2个参数是事情形式。当呼吁贰个事务时,必须决定是依据只读照旧读写形式请求访问。事务是能源密集型的,所以借让你无需改换data store中的数据,你只供给以只读方式对object stores集结进行呼吁访问。

清单二演示了怎么样运用方便的方式开创三个业务,并在那片小说的 Implementing Database-Specific Code 部分开始展览了详实研商。

IndexedDB是什么?

据书上说请求

直到这里,有二个屡次现身的宗旨,您可能曾经注意到。对数据库的每回操作,描述为经过3个请求展开数据库,访问3个object store,再持续。IndexedDB API天生是依附请求的,那也是API异步天性提示。对于你在数据库施行的历次操作,你必须首先为这些操作创制多少个呼吁。当呼吁完成,你可以响应由请求结果产生的轩然大波和谬误。

正文完结的代码,演示了何等使用请求张开数据库,创立三个业务,读取object store的源委,写入object store,清空object store。

IndexedDB是目的存款和储蓄,它不一致于带有表格(包括行和列的聚众)的关周密据库。那是2个首要的一向分化,并且会潜移默化您设计和营造利用的方法。

开采数据库的央浼生命周期

IndexedDB使用事件生命周期管理数据库的开采和配备操作。图二示范了3个展开的央求在任天由命的条件下发出upgrade need事件。

澳门新浦京娱乐场网站 3

图二:IndexedDB展开请求的生命周期

怀有与数据库的并行开首于3个开垦的乞请。试图展开数据库时,您必须传递3个被呼吁数据库的版本号的整数值。在张开请求时,浏览器相比较你传入的用于展开请求的版本号与实际数据库的版本号。要是所请求的版本号高于浏览器中当前的版本号(或许以后尚未存在的数据库),upgrade needed事件触发。在uprade need事件之间,你有机会通过抬高或移除stores,键和索引来垄断(monopoly)object stores。

纵然所请求的数据库版本号和浏览器的当下版本号1致,或许进级进程一气浑成,二个开辟的数据库将回来给调用者。

 

不当冒泡

自然,有时候,请求恐怕不会按预想实现。IndexedDB API通过荒谬冒泡效果来援助追踪和保管不当。假如二个特定的乞请遭遇错误,你能够品味在伸手对象上管理错误,只怕你能够允许错误通过调用栈冒泡向上传递。那几个冒泡天性,使得你没有要求为各种请求达成特定错误管理操作,而是能够挑选只在2个越来越高等别上增添错误管理,它给你二个机遇,保持你的错误管理代码简洁。本文中落实的例证,是在1个高等别管理错误,以便越来越细粒度操作发生的此外不当冒泡到通用的错误管理逻辑。

在价值观的关周到据存款和储蓄中,大家有1个“待办事项”的报表,个中各行存款和储蓄了用户待办事项数据的聚焦,而各列则是数据的命名类型。要插入数据,日常接纳如下语义:INSERTINTO Todo(id, data, update_time) VALUES (1, "Test","01/01/2010");

浏览器扶助

恐怕在支付Web应用程序最要紧的主题材料是:“浏览器是或不是帮衬本身想要做的?“固然浏览器对IndexedDB的支撑在继续升高,采纳率并不是大家所企望的那样布满。图三出示了caniuse.com网站的告知,支持IndexedDB的为6陆%多一丢丢。最新版本的银狐,Chrome,Opera,Safar,iOS Safari,和Android完全帮衬IndexedDB,Internet Explorer和BlackBerry部分帮助。就算这一个列表的跟随者是动人心弦的,但它从不报告全体旧事。

澳门新浦京娱乐场网站 4

图三:浏览器对IndexedDB的援助,来自caniuse.com

只有丰裕新本子的Safari和iOS Safari 帮助IndexedDB。据caniuse.com展现,那只占大致0.0壹%的环球浏览器采取。IndexedDB不是贰个你感到能够理所必然获得帮衬的现世Web API,可是你将高速会那样感到。

 

另一种选择

浏览器支持地方数据库并不是从IndexedDB才初阶完毕,它是在WebSQL落到实处之后的一种新点子。类似IndexedDB,WebSQL是贰个客户端数据库,但它看做一个关全面据库的兑现,使用结构化查询语言(SQL)与数据库通讯。WebSQL的历史充满了波折,但底线是从未主流的浏览器厂家对WebSQL继续扶助。

借使WebSQL实际上是二个撇下的本事,为何还要提它呢?有趣的是,WebSQL在浏览器里拿走稳步的支撑。Chrome, Safari, iOS Safari, and Android 浏览器都支持。其余,并不是那些浏览器的新颖版本才提供支撑,许多那几个新式最棒的浏览器在此之前的版本也足以支撑。有意思的是,假如您为WebSQL增添帮忙来协理IndexedDB,你突然开掘,好些个浏览器厂家和本子成为支撑浏览器内置数据库的某种化身。

于是,假如你的应用程序真正须求1个客户端数据库,你想要达到的最高档别的施用大概,当IndexedDB不可用时,或然你的应用程序或者看起来要求选择使用WebSQL来协助客户端数据架构。即使文书档案数据库和关周到据库管理数占有显著的出入,但若是你有不利的抽象,就足以应用本地数据库营造四个应用程序。

IndexedDB的不一样之处在于,您能够创设有个别项目数据的指标存款和储蓄,然后只需将JavaScript对象留存在该存款和储蓄中就能够。每一个对象存款和储蓄都能够有目录的会集,那样就能够张开高效的查询和迭代。

IndexedDB是不是合乎自个儿的应用程序?

如今最重大的标题:“IndexedDB是还是不是合乎笔者的应用程序?“像过去一律,答案是早晚的:“视情状而定。“首先当你筹算在客户端保存数据时,你会挂念HTML伍本土存储。本地存款和储蓄获得大面积浏览器的辅助,有特别轻松使用的API。轻易有其优势,但其劣势是心有余而力不足支撑复杂的找出攻略,存款和储蓄大量的多少,并提供业务帮助。

IndexedDB是3个数据库。所以,当您想为客户端做出决定,考虑你怎么样在服务端选用二个长久化介质的数据库。你只怕会问本身有个别主题材料来援助调节客户端数据库是或不是符合您的应用程序,包涵:

  • 你的用户通过浏览器访问您的应用程序,(浏览器)帮忙IndexedDB API吗 ?
  • 您须求仓储多量的数量在客户端?
  • 你须求在二个重型的数额集合中火速稳固单个数办事处?
  • 您的架构在客户端供给事业协助吧?

若果您对中间的别的难题答问了“是的”,很有非常的大希望,IndexedDB是您的应用程序的2个很好的候选。

 

使用IndexedDB

近日,你已经有机会熟识了①部分的完整概念,下一步是开头完毕基于IndexedDB的应用程序。第3个步骤要求统一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)的概念,替代它的是针对性索引的询问,那样能够产生三个指针,用于在结果集以内迭代。

应用概述

在本教程中,您将学习怎样创制2个用到IndexedDB存款和储蓄数据的模块化JavaScript应用程序。为了打探应用程序是怎样职业的,参考图4,它描述了任务应用程序处于空白状态。从此间你可以为列表增多新职分。图五来得了录入了多少个任务到系统的镜头。图陆呈现怎么删除3个职分,图7展现了正在编纂职责时的应用程序。

澳门新浦京娱乐场网站 5

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

澳门新浦京娱乐场网站 6

图五:职分列表

澳门新浦京娱乐场网站 7

图陆:删除义务

澳门新浦京娱乐场网站 8

图柒:编辑职分
今昔您熟习的应用程序的功能,下一步是开头为网址铺设基础。

 

铺设基础

那一个例子从贯彻如此一个模块起首,它担当从数据库读取数据,插入新的靶子,更新现存对象,删除单个对象和提供在四个object store删除全数指标的选项。那个事例完结的代码是通用的多少访问代码,您能够在任何object store上行使。

以此模块是透过3个应声推行函数表明式(IIFE)实现,它选取对象字面量来提供组织。上边包车型地铁代码是模块的摘要,表达了它的主导构造。

JavaScript

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

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

用如此的构造,能够使这些应用程序的具有逻辑封装在贰个名叫app的单对象上。此外,数据库相关的代码在二个名为db的app子对象上。

其一模块的代码应用IIFE,通过传递window对象来担保模块的合适范围。使用use strict确认保证这一个函数的代码函数是遵从(javascript严刻形式)严厉编译规则。db对象作为与数据库交互的具有函数的根本容器。最后,window对象检查app的实例是不是留存,假使存在,模块使用当前实例,假使不存在,则开创一个新指标。一旦app对象成功再次回到或创办,db对象附加到app对象。

正文的别的部分将代码增添到db对象内(在implementation here会评价),为应用程序提供特定于数据库的逻辑。因而,如您所见本文前边的片段中定义的函数,想想父db对象活动,但全数别的职能都以db对象的分子。完整的数据库模块列表见清单贰。

本课程只是举了3个实际上示例,告诉您针对编写为使用WebSQL 的依存应用怎么着选取IndexedDB。 

Implementing Database-Specific Code

对数据库的种种操作关联着二个先决条件,即有2个开发的数据库。当数据库正在被展开时,通过检查数据库版本来决断数据库是还是不是必要任何改造。上面包车型地铁代码呈现了模块怎样追踪当前版本,object store名、某成员(保存了1旦数据库展开请求完结后的数据库当前实例)。

JavaScript

version: 1, objectStoreName: 'tasks', instance: {},

1
2
3
version: 1,
objectStoreName: 'tasks',
instance: {},

在那边,数据库张开请求产生时,模块请求版本一数据库。如若数据库不设有,或然版本小于一,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的操作都以在3个东西的上下文中推行的。事务请求接受贰个object store名字的数组。这些函数这一次被铺排为只使用二个object store,然而一旦您须要在业务中操作七个object store,你要求传递四个object store的名字到数组中。事务函数的第三个参数是一个情势。

若是事情请求可用,您就能够透过传递要求的object store名字来调用objectStore函数以博取object store实例的访问权。那么些模块的其他函数使用getObjectStore来获得object store的访问权。

下1个实现的函数是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是3个实惠的值。倘若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参数的值转变为2个平头。取决于函数被调用时,字符串或整数都可能传递给函数。这几个达成跳过了对尽管所给的字符串不能够转变到整数该咋做的景观的拍卖。一旦二个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的值为整数。您能够选拔创制2个更硬朗的兑现来管理id值无法分析成整数的荒唐例子的回调,但为了教导原因,代码示例是有意的。

借使id值能担保转变来2个平头,数据库被张开,3个可写的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可用,1个新的乞求通过调用clear函数来创设。1旦clear操作成功,回调函数被施行。

 

实行用户分界面特定代码

前几天全体特定于数据库的代码被封装在app.db模块中,用户分界面特定代码能够接纳此模块来与数据库交互。用户分界面特定代码的欧洲经济共同体清单(index.ui.js)能够在清单叁中拿走,完整的(index.html)页面包车型客车HTML源代码能够在清单4中获得。

缘何是 IndexedDB?

结论

乘胜应用程序的供给的抓好,你会发掘在客户端高效存款和储蓄大批量的数码的优势。IndexedDB是足以在浏览器中央直属机关接使用且辅助异步事务的文书档案数据库实现。固然浏览器的支撑恐怕还是不可能维系,但在卓越的景观下,集成IndexedDB的Web应用程序具备强有力的客户端数据的造访技巧。

在大部分状态下,全体针对IndexedDB编写的代码是后天基于请求和异步的。官方正规有同步API,可是这种IndexedDB只适合web worker的上下文中使用。那篇小说公布时,还尚未浏览器达成的同台格式的IndexedDB API。

必然要确认保障代码在别的函数域外对厂家特定的indexedDB, IDBTransaction, and IDBKeyRange实例实行了标准化且使用了暴虐格局。那允许你幸免浏览器错误,当在strict mode下深入分析脚本时,它不会容许你对那一个对象重新赋值。

你必须有限支撑只传递正整数的本子号给数据库。传递到版本号的小数值会4舍5入。由此,假如您的数据库近日版本壹,您筹算访问一.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 /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 收藏 评论

在 二零一零 年 六月 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是事务性的。在事情之外是力不从心施行命令或张开指针的。事务包括如下类型:读/写作业、只读事务和快速照相事务。在本教程中,大家运用的是读/写作业。

 

第 一步:张开数据库

您必须先展开数据库,本事对其举行操作。 

 

[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,那是2个充足重大的不二等秘书籍,那是代码中当世无双能够供您创立对象存款和储蓄和目录的地方。

 

[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属性可让单个对象在存款和储蓄中颇具唯1性。本例中的该属性为“timeStamp”。objectStore中蕴藏的种种对象都必须有“timeStamp”。

 

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

 

第 三步:向目的存款和储蓄添增加少

作者们要创设的是待办事项列表管理器,由此必须求能力所能达到向数据库中加多待办事项。方法如下:

 

[html] 

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

  var db = html5rocks.indexedDB.db;

  var trans = db.transaction(["todo"], IDBTransaction.READ_澳门新浦京娱乐场网站,WRITE, 0);

  var store = trans.objectStore("todo");

  var request = store.put({

    "text": todoText,

    "timeStamp" : new Date().getTime()

  });

 

  request.onsuccess = function(e) {

    // Re-render all the todo's

    html5rocks.indexedDB.getAllTodoItems();

  };

 

  request.onerror = function(e) {

    console.log(e.value);

  };

};addTodo方法特别轻便,大家先是取得数据库对象的迅猛引用,开首化READ_W大切诺基ITE事务,并获得大家对象存款和储蓄的引用。

 

既是使用有权访问对象存款和储蓄,大家就足以通过基础JSON 对象发出简短的put命令。请小心timeStamp属性,那是目的的独占鳌头密钥,并作为“keyPath”使用。put调用成功后,会触发onsuccess事件,然后大家就足以在显示器上展现内容了。

 

第 四步:查询存储中的数据。

既是数据已经在数据库中了,大家就必要经过某种格局以有意义的格局访问数据。幸运的是,那样的方法特别轻便直接:

 

[html] 

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

  var todos = document.getElementById("todoItems");

  todos.innerHTML = "";

 

  var db = html5rocks.indexedDB.db;

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

  var store = trans.objectStore("todo");

 

  // Get everything in the store;

  var keyRange = IDBKeyRange.lowerBound(0);

  var cursorRequest = store.openCursor(keyRange);

 

  cursorRequest.onsuccess = function(e) {

    var result = e.target.result;

    if(!!result == false)

      return;

 

    renderTodo(result.value);

    result.continue();

  };

 

  cursorRequest.onerror = html5rocks.indexedDB.onerror;

};请小心,本例中央银行使的富有那一个命令都是异步的,因而数据不是从事务内部重返的。

 

该代码可生成事务,并将对于数据的 keyRange寻找实例化。keyRange定义了大家要从存款和储蓄中询问的粗略数据子集。假使存款和储蓄的keyRange是数字时间戳,大家应将寻找的微乎其微值设为0(时间原点后的别样时刻),那样就能够重返全体数据。

 

今昔大家有了业务、对要询问的蕴藏的引用以及要迭代的界定。剩下的劳作正是开辟指针并附加“onsuccess”事件了。

 

结果会传送到对指针的中标回调,并在内部表现。对于每一种结果只会运维一回回调,因而请务必持续迭代您要求的数目,以保障对结果对象调用“continue”。

 

第 四 步:显示对象存款和储蓄中的数据

从目的存储中抓取了多少后,将对指针中的每一个结果调用renderTodo方法。

 

[html] 

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

  var todos = document.getElementById("todoItems");

  var li = document.createElement("li");

  var a = document.createElement("a");

  var t = document.createTextNode();

  t.data = row.text;

 

  a.addEventListener("click", function(e) {

    html5rocks.indexedDB.deleteTodo(row.text);

  });

 

  a.textContent = " [Delete]";

  li.appendChild(t);

  li.appendChild(a);

  todos.appendChild(li)

}对于有些钦点的待办事项,我们只供给取得文本并为其创立用户分界面(包蕴“删除”按钮,以便除去待办事项)。

 

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

[html] 

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

  var db = html5rocks.indexedDB.db;

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

  var store = trans.objectStore("todo");

 

  var request = store.delete(id);

 

  request.onsuccess = function(e) {

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

  };

 

  request.onerror = function(e) {

    console.log(e);

  };

};正如将数据 put到目的存款和储蓄中的代码同样,删除数据也相当粗略。运行贰个事务,通过对象引用对象存款和储蓄,然后通过对象的唯1ID发出delete命令。

 

第 陆步:全体提到起来

在加载网页时,张开数据库并创立表格(如有供给),然后呈现数据库中只怕已存在的别的待办事项。

 

[html] 

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

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

}

 

window.add伊夫ntListener("DOMContentLoaded", init, false);那必要用到可将数据抽取 DOM的函数,即 html5rocks.indexedDB.addTodo方法: 

 

[html] 

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

IndexedDB是HTML5中的新扩张效益。网络数据库托管并留存在用户的浏览器内。只要让开垦职员通过抬高的询问作用创建应用,就足以预认为...

本文由澳门新浦京娱乐场网站发布于新浦京娱乐场官网,转载请注明出处:澳门新浦京娱乐场网站深深深入分析HTML5中的In