您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:深入解析HTML5中的IndexedDB索引数据库

新葡亰496net:深入解析HTML5中的IndexedDB索引数据库

发布时间:2019-06-16 08:33编辑:新葡亰官网浏览(126)

    前端的数据库:IndexedDB入门

    2014/12/27 · 未分类 · IndexedDB

    本文由 伯乐在线 - cucr 翻译,黄利民 校稿。未经许可,禁止转载!
    英文出处:www.codemag.com。迎接插足翻译组。

    应用程序须要多少。对大大多Web应用程序来讲,数据在劳动器端协会和治本,客户端通过互联网请求获取。随着浏览器变得越来越有技术,因而可选择在浏览器存款和储蓄和决定应用程序数据。

    本文向你介绍名叫IndexedDB的浏览器端文书档案数据库。使用lndexedDB,你能够通过惯于在服务器端数据库差不离同一的章程创设、读取、更新和删除多量的记录。请使用本文中可工作的代码版本去体会,完整的源代码能够因而GitHub库找到。

    读到本学科的最终时,你将明白IndexedDB的基本概念以及怎么着贯彻三个利用IndexedDB实践总体的CRUD操作的模块化JavaScript应用程序。让大家稍事亲近IndexedDB并早先吧。

    什么是IndexedDB

    貌似的话,有两种不相同体系的数据库:关系型和文书档案型(也称之为NoSQL或对象)。关周详据库如SQL Server,MySQL,Oracle的数码存款和储蓄在表中。文书档案数据库如MongoDB,CouchDB,Redis将数据集作为个体对象存款和储蓄。IndexedDB是二个文书档案数据库,它在一点一滴内放置浏览器中的二个沙盒蒙受中(强制依据(浏览器)同源攻略)。图1来得了IndexedDB的数据,展示了数据库的构造

    新葡亰496net 1

    图1:开垦者工具查看叁个object store

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

    简介

    长远分析HTML5中的IndexedDB索引数据库,html5indexeddb

    这篇文章主要介绍了一语道破深入分析HTML5中的IndexedDB索引数据库,包括事务锁等基本效率的相关应用示例,供给的意中人能够参见下

    介绍 IndexedDB是HTML5 WEB数据库,允许HTML5 WEB应用在用户浏览器端存款和储蓄数据。对于使用来讲IndexedDB特别强劲、有用,能够在客户端的chrome,IE,Firefox等WEB浏览器中存款和储蓄大批量数码,下边简要介绍一下IndexedDB的基本概念。
     
    什么是IndexedDB IndexedDB,HTML5新的数目存款和储蓄,能够在客户端存款和储蓄、操作数据,能够使利用加载地越来越快,更加好地响应。它不一样于关系型数据库,具有数据表、记录。它影响着我们规划和创办应用程序的艺术。IndexedDB 创造有数据类型和简易的JavaScript长久对象的object,每一个object能够有目录,使其卓有成效地查询和遍历整个会集。本文为您提供了怎么在Web应用程序中应用IndexedDB的真实事例。
     
    开始 我们须要在实施前包括下前边置代码

    JavaScript Code复制内容到剪贴板

    1. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   
    2.     
    3. //prefixes of window.IDB objects   
    4. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;   
    5. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   
    6.     
    7. if (!indexedDB) {   
    8. alert("Your browser doesn't support a stable version of IndexedDB.")   
    9. }  

     
    打开IndexedDB 在开立数据库在此以前,大家先是必要为数据库创立数量,假如大家有如下的用户新闻:

    JavaScript Code复制内容到剪贴板

    1. var userData = [   
    2. { id: "1", name: "Tapas", age: 33, email: "[email protected]" },   
    3. { id: "2", name: "Bidulata", age: 55, email: "[email protected]" }   
    4. ];  

    后天大家需求用open()方法展开大家的数据库:

    JavaScript Code复制内容到剪贴板

    1. var db;   
    2. var request = indexedDB.open("databaseName", 1);   
    3.     
    4. request.onerror = function(e) {   
    5. console.log("error: ", e);   
    6. };   
    7.     
    8. request.onsuccess = function(e) {   
    9. db = request.result;   
    10. console.log("success: "  db);   
    11. };   
    12. request.onupgradeneeded = function(e) {   
    13.     
    14. }  

    如上所示,我们已经开拓了名称为"databaseName",钦命版本号的数据库,open()方法有几个参数:
    1.率先个参数是数据库名称,它会检查评定名叫"databaseName"的数据库是不是业已存在,假如存在则展开它,不然创造新的数据库。
    2.次之个参数是数据库的版本,用于用户更新数据库结构。
     
    onSuccess处理 发生成功事件时“onSuccess”被触发,倘若持有成功的央浼都在此管理,我们能够通过赋值给db变量保存请求的结果供之后选择。
     
    onerror的管理程序 发出错误事件时“onerror”被触发,如果张开数据库的进程中失利。
     
    Onupgradeneeded管理程序 借使您想翻新数据库(成立,删除或改换数据库),那么你必须兑现onupgradeneeded管理程序,使您能够在数据库中做任何改换。 在“onupgradeneeded”管理程序中是能够改造数据库的构造的无与伦比地方。
     
    创办和丰裕数据到表:
    IndexedDB使用对象存储来存款和储蓄数据,而不是经过表。 每当四个值存储在对象存款和储蓄中,它与贰个键相关联。 它同意大家创造的任何对象存储索引。 索引允许大家访问存款和储蓄在对象存款和储蓄中的值。 上面包车型地铁代码展现了什么样创制对象存款和储蓄并插入预先妄图好的数量:

    JavaScript Code复制内容到剪贴板

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

    咱俩利用createObjectStore()方法创制三个对象存储。 此方法接受七个参数:

    • 仓库储存的名号和参数对象。 在那边,大家有三个名称为"users"的目的存款和储蓄,并定义了keyPath,那是目的唯一性的属性。 在此间,大家使用“id”作为key帕特h,这么些值在对象存储中是不二法门的,大家亟须确定保障该“ID”的习性在对象存储中的每一个对象中存在。 一旦成立了指标存款和储蓄,大家能够起来运用for循环增加数据进去。
       
      手动将数据增进到表:
      大家能够手动增加额外的数据到数据库中。

    JavaScript Code复制内容到剪贴板

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

    事先大家在数据库中做此外的CRUD操作(读,写,修改),必须选用工作。 该transaction()方法是用来钦定我们想要进行事务管理的对象存款和储蓄。 transaction()方法接受3个参数(第一个和第多少个是可选的)。 第贰个是大家要处理的靶子存款和储蓄的列表,第贰个钦赐大家是还是不是要只读/读写,第八个是本子变化。
     
    从表中读取数据 get()方法用于从指标存款和储蓄中追寻数据。 大家前边已经设置对象的id作为的keyPath,所以get()方法将找寻拥有同等id值的靶子。 上面包车型大巴代码将回来大家命名字为“Bidulata”的对象:

    JavaScript Code复制内容到剪贴板

    1. function Read() {   
    2. var objectStore = db.transaction(["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事务管理。不过结果就不一致

    新葡亰496net 2

    测试的时候b.html中或然不会应声有出口,因为indexedDB正忙着管理a.html东西,b.html事务丢在了业务丢队列中等待。可是无论怎么样,输出结果也不会是1这几个值。因为indexedDB的极小管理单位是业务,而不是localStorage那样以表达式为单位。那样只要把lock和unlock之间需求管理的东西放入多个事务中就能够完毕。此外,浏览器对indexedDB的协助不及localStorage,所以利用时还得思虑浏览器包容。

    那篇小说主要介绍了深深剖析HTML5中的IndexedDB索引数据库,包含事务锁等基本效能的相关使...

    在做web开采的时候,有的时候候必要仓库储存一些缓存数据,幸免下一次造访的时候重新加载多量数额,尽管只是存在session、cookies里面,会很影响进度,并且session和cookies存储的数量都比较轻巧,不能够积攒一些结构化的数量,html5提供了一项相比较实用的本土存储工夫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约等于一张表,里面积存的每条数据和多少个键相关联。

    html5 初试 indexedDB(推荐),html5indexeddb

    indexedDB是积累大批量结构化数据的API,demo中用到的是异步API,麻烦的正是装有对indexedDB的操作都会发生四个异步的‘请求’,只要熟习了API操作起来也很简短。

    大概流程是如此

    1.张开数据库

    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. }  

    如此那般就 创造/连接 了贰个数据库

    2.成立交互对象 && 监听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. 新葡亰496net:深入解析HTML5中的IndexedDB索引数据库,HTML5本地存储。         
    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.         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. 新葡亰496net:深入解析HTML5中的IndexedDB索引数据库,HTML5本地存储。    <ul id="todoItems"></ul>  
    142.     <input type="text" id="todo" name="todo" placeholder="adsageIDB text?" />  
    143.     <input type="submit" value="扩大三个 IDB" onclick="addTodo(); return false;"/>  
    144.   </body>  
    145. </html>  

    上述那篇html5 初试 indexedDB(推荐)就是小编分享给大家的全部内容了,希望能给大家二个参照,也冀望我们多多协助帮客之家。

    原稿地址:

    初试 indexedDB(推荐),html5indexeddb 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);
    request.onsuccess=function(e){
    var student=e.target.result;
    student.age=35;
    store.put(student);
    };
    }
    </pre>

    对象仓库

    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事件。

    新葡亰496net 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和Motorola部分协助。纵然这一个列表的维护者是载歌载舞的,但它没有告知全部好玩的事。

    新葡亰496net 4

    图3:浏览器对IndexedDB的补助,来自caniuse.com

    除非充足新本子的Safari和iOS Safari 援助IndexedDB。据caniuse.com展现,那只占大约0.01%的大千世界浏览器采纳。IndexedDB不是二个您感觉能够理之当然获得协理的今世Web API,但是你将急忙会这么感到。

    新葡亰496net, 

    另一种选用

    浏览器援救本地数据库并不是从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显示了正在编纂职责时的应用程序。

    新葡亰496net 5

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

    新葡亰496net 6

    图5:任务列表

    新葡亰496net 7

    图6:删除任务

    新葡亰496net 8

    图7:编辑职务
    今后您熟习的应用程序的功效,下一步是发端为网址铺设基础。

     

    铺设基础

    本条事例从落到实处那样二个模块先河,它承担从数据库读取数据,插入新的对象,更新现成对象,删除单个对象和提供在一个object store删除全数指标的选项。这几个例子完结的代码是通用的数码访问代码,您能够在任何object store上接纳。

    其一模块是经过三个当即实行函数表明式(IIFE)完成,它使用对象字面量来提供组织。下边包车型客车代码是模块的摘要,表明了它的主干组织。

    JavaScript

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

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

    用那样的结构,能够使这一个应用程序的保有逻辑封装在四个名称叫app的单对象上。别的,数据库相关的代码在二个名称叫db的app子对象上。

    其一模块的代码应用IIFE,通过传递window对象来确认保证模块的适度限制。使用use strict确认保证那一个函数的代码函数是规行矩步(javascript严酷情势)严格编写翻译规则。db对象作为与数据库交互的保有函数的珍视容器。最终,window对象检查app的实例是或不是存在,如若存在,模块使用当前实例,假若不设有,则开创三个新对象。一旦app对象成功再次回到或创建,db对象附加到app对象。

    正文的别的部分将代码增多到db对象内(在implementation here会评说),为应用程序提供特定于数据库的逻辑。由此,如你所见本文前面的局地中定义的函数,想想父db对象活动,但全数其余功用都是db对象的积极分子。完整的数据库模块列表见清单2。

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

    Implementing Database-Specific Code

    对数据库的各种操作关联着八个先决条件,即有二个打开的数据库。当数据库正在被展开时,通过检查数据库版本来判定数据库是还是不是须要其余改动。上面包车型地铁代码显示了模块怎样追踪当前版本,object store名、某成员(保存了一旦数据库张开请求完结后的数据库当前实例)。

    JavaScript

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

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

    在此间,数据库展开请求产生时,模块请求版本1数据库。假若数据库不存在,或许版本小于1,upgrade needed事件在开荒请求完结前触发。这些模块被设置为只行使叁个object store,所以名字直接定义在此间。最终,实例成员被成立,它用于保存一旦张开请求实现后的数据库当前实例。

    接下去的操作是促成upgrade needed事件的事件管理程序。在这里,检查当前object store的名字来推断请求的object store名是或不是留存,假使不存在,创设object store。

    JavaScript

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

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

    在这几个事件管理程序里,通过事件参数e.target.result来访问数据库。当前的object store名称的列表在_db.objectStoreName的字符串数组上。以往,假诺object store不存在,它是由此传递object store名称和store的键的概念(自增,关联到数码的ID成员)来成立。

    模块的下叁个成效是用来捕获错误,错误在模块分歧的伏乞创建时冒泡。

    JavaScript

    errorHandler: function (error) { window.alert('error: ' error.target.code); debugger; },

    1
    2
    3
    4
    errorHandler: function (error) {
        window.alert('error: ' error.target.code);
        debugger;
    },

    在此地,errorHandler在三个警告框展现任何错误。那一个函数是假意保持轻易,对开拓自身,当你学习应用IndexedDB,您可以很轻便地来看任何不当(当他们发生时)。当你准备在生产条件使用那个模块,您供给在这几个函数中落到实处部分错误处理代码来和您的应用程序的上下文打交道。

    近些日子基础达成了,这一节的其他部分将演示怎样促成对数据库施行一定操作。第一个需求检查的函数是open函数。

    JavaScript

    open: function (callback) { var request = window.indexedDB.open( db.objectStoreName, db.version); request.onerror = db.errorHandler; request.onupgradeneeded = db.upgrade; request.onsuccess = function (e) { db.instance = request.result; db.instance.onerror = db.errorHandler; callback(); }; },

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    open: function (callback) {
        var request = window.indexedDB.open(
            db.objectStoreName, db.version);
        request.onerror = db.errorHandler;
        request.onupgradeneeded = db.upgrade;
        request.onsuccess = function (e) {
            db.instance = request.result;
            db.instance.onerror =
                db.errorHandler;
            callback();
        };
    },

    open函数试图张开数据库,然后实践回调函数,告知数据库成功张开药方可计划使用。通过拜访window.indexedDB调用open函数来创制张开请求。这几个函数接受你想展开的object store的称谓和你想使用的数据库版本号。

    假定请求的实例可用,第一步要进行的工作是安装错误管理程序和进级换代函数。记住,当数据库被展开时,要是脚本请求比浏览器里越来越高版本的数据库(也许只要数据库不设有),晋级函数运转。可是,若是请求的数据库版本相称当前数据库版本同一时候未有不当,success事件触发。

    假设全部成功,展开数据库的实例能够从呼吁实例的result属性得到,这几个实例也缓存到模块的实例属性。然后,onerror事件设置到模块的errorHandler,作为以往其余请求的荒唐捕捉处理程序。最后,回调被推行来报告调用者,数据库已经开采并且精确地布局,能够选择了。

    下三个要达成的函数是helper函数,它回到所请求的object store。

    JavaScript

    getObjectStore: function (mode) { var txn, store; mode = mode || 'readonly'; txn = db.instance.transaction( [db.objectStoreName], mode); store = txn.objectStore( db.objectStoreName); return store; },

    1
    2
    3
    4
    5
    6
    7
    8
    9
    getObjectStore: function (mode) {
        var txn, store;
        mode = mode || 'readonly';
        txn = db.instance.transaction(
            [db.objectStoreName], mode);
        store = txn.objectStore(
            db.objectStoreName);
        return store;
    },

    在此处,getObjectStore接受mode参数,允许你决定store是以只读还是读写情势请求。对于这几个函数,私下认可mode是只读的。

    每一个针对object store的操作都是在二个事物的左右文中实行的。事务请求接受二个object store名字的数组。这么些函数此番被安排为只利用贰个object store,然则若是您供给在作业中操作四个object store,你要求传递八个object store的名字到数组中。事务函数的第三个参数是二个形式。

    只要事情请求可用,您就能够经过传递须求的object store名字来调用objectStore函数以博得object store实例的访问权。那些模块的别的函数使用getObjectStore来博取object store的访问权。

    下三个贯彻的函数是save函数,实践插入或更新操作,它依据传入的数额是或不是有八个ID值。

    JavaScript

    save: function (data, callback) { db.open(function () { var store, request, mode = 'readwrite'; store = db.getObjectStore(mode), request = data.id ? store.put(data) : store.add(data); request.onsuccess = callback; }); },

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    save: function (data, callback) {
        db.open(function () {
            var store, request,
                mode = 'readwrite';
     
            store = db.getObjectStore(mode),
            request = data.id ?
                store.put(data) :
                store.add(data);
            request.onsuccess = callback;
        });
    },

    save函数的多个参数分别是亟需保留的多少对象实例和操作成功后须要实施的回调。读写情势用于将数据写入数据库,它被传播到getObjectStore来收获object store的三个可写实例。然后,检查数据对象的ID成员是或不是留存。假诺存在ID值,数据必须立异,put函数被调用,它创设漫长化请求。不然,假若ID不设有,那是新数据,add请求重返。最后,不管put或然add 请求是不是进行了,success事件管理程序要求安装在回调函数上,来告诉调用脚本,一切进展顺遂。

    下一节的代码在清单1所示。getAll函数首先张开数据库和做客object store,它为store和cursor(游标)分别设置值。为数据库游标设置游标变量允许迭代object store中的数据。data变量设置为三个空数组,充当数据的容器,它回到给调用代码。

    在store访问数据时,游标遍历数据库中的每条记下,会触发onsuccess事件管理程序。当每条记下走访时,store的多少年足球以经过e.target.result事件参数获得。就算事实上数目从target.result的value属性中拿走,首先必要在策动访问value属性前确定保证result是贰个灵光的值。假设result存在,您能够加多result的值到数据数组,然后在result对象上调用continue函数来接二连三迭代object store。最终,假若未有reuslt了,对store数据的迭代甘休,相同的时间数据传递到回调,回调被推行。

    近来模块能够从data store获得全数数据,下八个亟需贯彻的函数是担当访问单个记录。

    JavaScript

    get: function (id, callback) { id = parseInt(id); db.open(function () { var store = db.getObjectStore(), request = store.get(id); request.onsuccess = function (e){ callback(e.target.result); }; }); },

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    get: function (id, callback) {
        id = parseInt(id);
        db.open(function () {
            var
                store = db.getObjectStore(),
                request = store.get(id);
            request.onsuccess = function (e){
                callback(e.target.result);
            };
        });
    },

    get函数实行的率先步操作是将id参数的值转变为多少个大背头。取决于函数被调用时,字符串或整数都也许传递给函数。那么些实现跳过了对倘诺所给的字符串无法调换到整数该如何是好的情形的拍卖。一旦一个id值希图好了,数据库张开了和object store能够访问了。获取访问get请求出现了。请求成功时,通过传播e.target.result来施行回调。它(e.target.result)是由此调用get函数到手的单条记录。

    这两天封存和挑选操作已经冒出了,该模块还亟需从object store移除数量。

    JavaScript

    'delete': function (id, callback) { id = parseInt(id); db.open(function () { var mode = 'readwrite', store, request; store = db.getObjectStore(mode); request = store.delete(id); request.onsuccess = callback; }); },

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    'delete': function (id, callback) {
        id = parseInt(id);
        db.open(function () {
            var
                mode = 'readwrite',
                store, request;
            store = db.getObjectStore(mode);
            request = store.delete(id);
            request.onsuccess = callback;
        });
    },

    delete函数的称号用单引号,因为delete是JavaScript的保留字。这足以由你来决定。您可以选拔命名函数为del或任何名目,然而delete用在这一个模块为了API尽也许好的抒发。

    传送给delete函数的参数是目的的id和一个回调函数。为了保全这么些达成轻松,delete函数约定id的值为整数。您能够采取创制二个更健全的落成来拍卖id值不能够深入分析成整数的谬误例子的回调,但为了指引原因,代码示例是明知故问的。

    万一id值能保险转变到一个大背头,数据库被张开,二个可写的object store获得,delete函数字传送入id值被调用。当呼吁成功时,将试行回调函数。

    在少数意况下,您可能须求删除二个object store的装有的记录。在这种气象下,您访问store同不平日间免去全体剧情。

    JavaScript

    deleteAll: function (callback) { db.open(function () { var mode, store, request; mode = 'readwrite'; store = db.getObjectStore(mode); request = store.clear(); request.onsuccess = callback; }); }

    1
    2
    3
    4
    5
    6
    7
    8
    9
    deleteAll: function (callback) {
        db.open(function () {
            var mode, store, request;
            mode = 'readwrite';
            store = db.getObjectStore(mode);
            request = store.clear();
            request.onsuccess = callback;
        });
    }

    此间deleteAll函数负责展开数据库和访问object store的一个可写实例。一旦store可用,七个新的伸手通过调用clear函数来成立。一旦clear操作成功,回调函数被实践。

     

    实践用户分界面特定代码

    于今具有特定于数据库的代码被封装在app.db模块中,用户分界面特定代码能够动用此模块来与数据库交互。用户分界面特定代码的一体化清单(index.ui.js)可以在清单3中获得,完整的(index.html)页面包车型大巴HTML源代码能够在清单4中获得。

    为什么是 IndexedDB?

    结论

    随着应用程序的须求的进步,你会开掘在客户端高效存款和储蓄大量的数额的优势。IndexedDB是足以在浏览器中一贯运用且扶助异步事务的文书档案数据库达成。固然浏览器的帮忙恐怕或不能够有限支撑,但在适用的图景下,集成IndexedDB的Web应用程序具备庞大的客户端数据的访问手艺。

    在好些个意况下,全部针对IndexedDB编写的代码是自然基于请求和异步的。官方正规有同步API,可是这种IndexedDB只适合web worker的光景文中使用。那篇小说公布时,还平昔不浏览器完成的一块儿格式的IndexedDB API。

    一定要保险代码在别的函数域外对商家特定的indexedDB, IDBTransaction, and IDBKeyRange实例实行了规范化且使用了适度从紧情势。那允许你幸免浏览器错误,当在strict mode下深入分析脚本时,它不会容许你对那多少个对象重新赋值。

    你必须确认保证只传递正整数的本子号给数据库。传递到版本号的小数值会四舍五入。因而,借使您的数据库近期版本1,您计划访问1.2版本,upgrade-needed事件不会接触,因为版本号最后评估是均等的。

    即时施行函数表明式(IIFE)一时叫做分歧的名字。不经常能够观望这么的代码组织措施,它叫做self-executing anonymous functions(自进行无名函数)或self-invoked anonymous functions(自调用无名氏函数)。为更为分解那么些名称相关的准备和意义,请阅读Ben Alman的小说Immediately Invoked Function Expression (IIFE) 。

    Listing 1: Implementing the getAll function

    JavaScript

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

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

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

    JavaScript

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

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

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

    JavaScript

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

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

    Listing 3: Full HTML source (index.html)

    JavaScript

    <!doctype html> <html lang="en-US"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Introduction to IndexedDB</title> <meta name="description" content="Introduction to IndexedDB"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs /font-awesome/4.1.0/css/font-awesome.min.css" > <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs /font-awesome/4.1.0/fonts/FontAwesome.otf" > <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs /font-awesome/4.1.0/fonts/fontawesome-webfont.eot" > <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs /font-awesome/4.1.0/fonts/fontawesome-webfont.svg" > <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs /font-awesome/4.1.0/fonts/fontawesome-webfont.ttf" > <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs /font-awesome/4.1.0/fonts/fontawesome-webfont.woff" > <style> h1 { text-align: center; color:#999; } ul li { font-size: 1.35em; margin-top: 1em; margin-bottom: 1em; } ul li.small { font-style: italic; } footer { margin-top: 25px; border-top: 1px solid #eee; padding-top: 25px; } i[data-id] { cursor: pointer; color: #eee; } i[data-id]:hover { color: #c75a6d; } .push-down { margin-top: 25px; } #save-button { margin-left: 10px; } </style> <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr /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

    新葡亰496net 9

    乐乎新浪:@hop_ping 个人主页 · 作者的篇章 · 17

    新葡亰496net 10

     

    替代它的是 IndexedDB,本学科的大旨是开发职员应运用这种多少存款和储蓄在客户端上囤积数据并开始展览操作。

     

    各大主流浏览器(包涵Chrome浏览器、Safari、Opera等)和大概具有基于Webkit的移位道具均援救WebSQL,并且很有望在可预言的前途继续提供支持。

     

    先决条件

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

     

    [html] 

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

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

    在大繁多气象下,假使您使用的是索引型数据库,那么就能够动用异步API。异步API是非阻塞系统,由此不会经过重返值获得多少,而是获得传递到钦点回调函数的数额。

     

    透过 HTML 协助IndexedDB是事务性的。在事情之外是不可能试行命令或张开指针的。事务蕴涵如下类型:读/写作业、只读事务和快照事务。在本教程中,大家运用的是读/写作业。

     

    第 1步:张开数据库

    您必须先展开数据库,才能对其进行操作。 

     

    [html]

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

     

    html5rocks.indexedDB.open = function() {

      var request = indexedDB.open("todos");

     

      request.onsuccess = function(e) {

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

        // Do some more stuff in a minute

      };

     

      request.onfailure = html5rocks.indexedDB.onerror;

    };大家已开垦名称为“todos”的数据库,并已将其分配给html5rocks.indexedDB对象中的db变量。将来我们得以在全方位课程中应用此变量来引用我们的数据库。

     

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

    你不得不在“SetVersion”事务内创设对象存储。小编还未曾介绍setVersion,那是四个非常首要的措施,那是代码中唯一能够供您创造对象存款和储蓄和目录的地点。

     

    [html]

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

      var request = indexedDB.open("todos",

        "This is a description of the database.");

     

      request.onsuccess = function(e) {

        var v = "1.0";

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

        var db = html5rocks.indexedDB.db;

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

        if(v!= db.version) {

          var setVrequest = db.setVersion(v);

     

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

          setVrequest.onfailure = html5rocks.indexedDB.onerror;

          setVrequest.onsuccess = function(e) {

            var store = db.createObjectStore("todo",

              {keyPath: "timeStamp"});

     

            html5rocks.indexedDB.getAllTodoItems();

          };

        }

     

        html5rocks.indexedDB.getAllTodoItems();

      };

     

      request.onfailure = html5rocks.indexedDB.onerror;

    }上述代码其实有那贰个效率。大家在 API中定义了“open”方法,调用此情势就可以展开“todos”数据库。展开请求不是随即试行的,而是重返IDBRequest。尽管当前函数存在,则会调用indexedDB.open方法。那与大家一般钦赐异步回调的艺术略有分裂,不过我们在回调施行前,有空子向IDBRequest对象附加我们团结的监听器。

     

    假设展开请求成功了,大家的 onsuccess回调就能够试行。在此回调中,我们应检查数据库版本,如若与预期版本不符,则调用“setVersion”。

     

    setVersion 是代码中唯一能让大家改动数据库结构的地点。在setVersion中,大家得以创建和删除对象存款和储蓄,以及创设和删除索引。调用setVersion可回到IDBRequest对象,供我们在里边附加回调。就算成功了,大家就开端创制对象存储。

     

    透过对 createObjectStore单次调用创立对象存款和储蓄。该方法会命名存款和储蓄以及参数对象。参数对象十分关键,它可让您定义主要的可选属性。就大家来说,定义keyPath属性可让单个对象在仓库储存中持有唯一性。本例中的该属性为“timeStamp”。objectStore中存款和储蓄的各类对象都不可能不有“timeStamp”。

     

    创设了目标存款和储蓄后,我们调用 getAllTodoItems方法。

     

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

    我们要创设的是待办事项列表管理器,由此必须求能够向数据库中增加待办事项。方法如下:

     

    [html] 

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

      var db = html5rocks.indexedDB.db;

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

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

      var request = store.put({

        "text": todoText,

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

      });

     

      request.onsuccess = function(e) {

        // Re-render all the todo's

        html5rocks.indexedDB.getAllTodoItems();

      };

     

      request.onerror = function(e) {

        console.log(e.value);

      };

    };addTodo方法特别轻巧,大家率先获得数据库对象的很快引用,初阶化READ_WTiggoITE事务,并拿走大家对象存款和储蓄的引用。

     

    既然使用有权访问对象存款和储蓄,大家就能够由此基础JSON 对象发出简短的put命令。请留意timeStamp属性,那是指标的唯一密钥,并视作“keyPath”使用。put调用成功后,会触发onsuccess事件,然后大家就能够在显示屏上表现内容了。

     

    第 4步:查询存款和储蓄中的数据。

    既然数据现已在数据库中了,我们就供给通过某种方式以有含义的措施访问数据。幸运的是,那样的艺术特别简单直接:

     

    [html] 

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

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

      todos.innerHTML = "";

     

      var db = html5rocks.indexedDB.db;

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

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

     

      // Get everything in the store;

      var keyRange = IDBKeyRange.lowerBound(0);

      var cursorRequest = store.openCursor(keyRange);

     

      cursorRequest.onsuccess = function(e) {

        var result = e.target.result;

        if(!!result == false)

          return;

     

        renderTodo(result.value);

        result.continue();

      };

     

      cursorRequest.onerror = html5rocks.indexedDB.onerror;

    };请留意,本例中选择的享有这个命令都以异步的,由此数据不是从事务内部再次来到的。

     

    该代码可转移事务,并将对于数据的 keyRange搜索实例化。keyRange定义了我们要从存款和储蓄中询问的回顾数据子集。假诺存款和储蓄的keyRange是数字时间戳,大家应将追寻的非常的小值设为0(时间原点后的别的时间),那样就能够回去全部数据。

     

    今后我们有了专门的学问、对要询问的累积的引用以及要迭代的限量。剩下的行事正是开拓指针并附加“onsuccess”事件了。

     

    结果会传送到对指针的功成名就回调,并在其间表现。对于各样结果只会运行二回回调,因而请务必持续迭代您必要的多少,以担保对结果对象调用“continue”。

     

    第 4 步:显示对象存储中的数据

    从目的存款和储蓄中抓取了数码后,将对指针中的各样结果调用renderTodo方法。

     

    [html] 

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

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

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

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

      var t = document.createTextNode();

      t.data = row.text;

     

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

        html5rocks.indexedDB.deleteTodo(row.text);

      });

     

      a.textContent = " [Delete]";

      li.appendChild(t);

      li.appendChild(a);

      todos.appendChild(li)

    }对于某些内定的待办事项,大家只需求获得文本并为其制成效户界面(包涵“删除”开关,以便除去待办事项)。

     

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

    [html] 

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

      var db = html5rocks.indexedDB.db;

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

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

     

      var request = store.delete(id);

     

      request.onsuccess = function(e) {

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

      };

     

      request.onerror = function(e) {

        console.log(e);

      };

    };正如将数据 put到对象存款和储蓄中的代码同样,删除数据也很简短。运转多个作业,通过对象引用对象存储,然后通过对象的唯一ID发出delete命令。

     

    第 6步:全体关联起来

    在加载网页时,打开数据库并创造表格(如有须要),然后呈现数据库中也许已存在的此外待办事项。

     

    [html] 

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

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

    }

     

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

     

    [html] 

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

    IndexedDB是HTML5中的新扩充效益。互联网数据库托管并留存在用户的浏览器内。只要让开辟职员通过增多的询问作用创制应用,就足以预知到...

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:深入解析HTML5中的IndexedDB索引数据库

    关键词:

上一篇:项目总结,vue技术要点

下一篇:没有了