索引型数据库的待办事项简要列表,深远解析HTML5中的IndexedDB索引数据库

前端的数据库: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个文档数据库,它在一点一滴内停放浏览器中的2个沙盒环境中(强制依照(浏览器)同源策略)。图1出示了IndexedDB的数码,突显了数据库的社团

皇家赌场手机版 1

图1:开发者工具查看多个object
store

全副的IndexedDB API请参见完整文档

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

那篇小说主要介绍了深刻解析HTML5中的IndexedDB索引数据库,蕴含事务锁等基本效能的连带应用示例,要求的朋友可以参照下

介绍 IndexedDB是HTML5 WEB数据库,允许HTML5
WEB应用在用户浏览器端存储数据。对于利用来说IndexedDB相当强大、有用,可以在客户端的chrome,IE,Firefox等WEB浏览器中蕴藏大批量数额,上面不难介绍一下IndexedDB的基本概念。
 
什么是IndexedDB IndexedDB,HTML5新的数额存储,可以在客户端存储、操作数据,可以使应用加载地更快,更好地响应。它不相同于关系型数据库,拥有数据表、记录。它影响着我们规划和创造应用程序的主意。IndexedDB
创立有数据类型和简单的JavaScript持久对象的object,各个object可以有目录,使其立竿见影地查询和遍历整个集合。本文为您提供了怎么着在Web应用程序中动用IndexedDB的真人真事事例。
 
开始 作者们需要在履行前包罗上边前置代码

JavaScript
Code复制内容到剪贴板

  1. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
      
  2. 索引型数据库的待办事项简要列表,深远解析HTML5中的IndexedDB索引数据库。    
  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使用对象存储来储存数据,而不是通过表。
每当3个值存储在目的存储中,它与二个键相关联。
它同意大家制造的其余对象存储索引。
索引允许大家访问存储在对象存储中的值。
下边的代码突显了怎么样创建对象存储并插入预先准备好的数目:

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()方法创设壹个指标存储。 此方法接受八个参数:

  • 储存的名称和参数对象。
    在这边,大家有3个名为”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()方法接受1个参数(第①个和首个是可选的)。
第壹个是我们要拍卖的靶子存储的列表,第1个内定大家是或不是要只读/读写,第多少个是本子变化。
 
从表中读取数据 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. 索引型数据库的待办事项简要列表,深远解析HTML5中的IndexedDB索引数据库。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.     //开首2个工作   
  26.     e.doTransaction(function(e){   
  27.       e.put(1,”test”); //设置test的值为1   
  28.       e.put(2,”test”); //设置test的值为2   
  29.     });   
  30.     setTimeout(callee);   
  31.   })();   
  32. };   
  33. </script>  
  34. <script src=”db.js”></script>  
  35. <script>  
  36. //b.html   
  37. function main(e){   
  38.   (function callee(){   
  39.     //开端一个业务   
  40.     e.doTransaction(function(e){   
  41.       //获取test的值   
  42.       e.get(“test”).onsuccess=function(e){   
  43.         console.log(e.target.result);   
  44.       };   
  45.     });   
  46.     setTimeout(callee);   
  47.   })();   
  48. };   
  49. </script>  

把localStorage换来了indexedDB事务处理。可是结果就不一致

皇家赌场手机版 2

测试的时候b.html中只怕不会即时有出口,因为indexedDB正忙着处理a.html东西,b.html事务丢在了事情丢队列中等待。然而无论怎么着,输出结果也不会是1这些值。因为indexedDB的细小处理单位是事情,而不是localStorage那样以表达式为单位。那样如若把lock和unlock之间需求处理的事物放入1个业务中即可完毕。其它,浏览器对indexedDB的支撑不如localStorage,所以使用时还得考虑浏览器包容。

那篇小说紧要介绍了入木三分解析HTML5中的IndexedDB索引数据库,包蕴事务锁等基本效能的连带使…

简介

正文转自:

设计规范

IndexedDB的架构很像在有的流行的劳务器端NOSQL数据库达成中的设计规范类型。面向对象数据经过object
stores(对象仓库)实行持久化,全数操作基于请求同时在事情限制内举行。事件生命周期使你可以决定数据库的布局,错误通过荒谬冒泡来使用API管理。

IndexedDB是HTML5中的新增效益。网络数据库托管并留存在用户的浏览器内。只要让开发人士通过丰硕的查询功效成立应用,就足以预言到,将会油然则生能够同时在线和离线使用的新星网络使用。

 

对象仓库

object
store是IndexedDB数据库的基础。若是您利用过关周全据库,平时可以将object
store等价于三个数码库表。Object
stores包含一个或几个目录,在store中依照一对键/值操作,这提供一种高效稳定数据的方法。

当您安顿2个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值。

 

<!DOCTYPE
html>
<html>
  <head>
 
  <style>
 
    body {
 
      color: #222;
 
      font: 14px Arial;
 
    }
 
    
 
    body a {
 
      color: #3D5C9D;
 
      text-decoration: none;
 
    }
 
  </style>
 
  <script>
 
    var html5rocks = {};
 
    window.indexedDB = window.indexedDB || window.webkitIndexedDB ||
 
                       window.mozIndexedDB;
 
    
 
    if (‘webkitIndexedDB’ in window) {
 
      window.IDBTransaction = window.webkitIDBTransaction;
 
      window.IDBKeyRange = window.webkitIDBKeyRange;
 
    }
 
    
 
    html5rocks.indexedDB = {};
 
    html5rocks.indexedDB.db = null;
 
    
 
    html5rocks.indexedDB.onerror = function(e) {
 
      console.log(e);
 
    };
 
    
 
    html5rocks.indexedDB.open = function() {
 
      var request = indexedDB.open(“todos”);
 
    
 
      request.onsuccess = function(e) {
 
        var v = 1;
 
        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.onerror = html5rocks.indexedDB.onerror;
 
          setVrequest.onsuccess = function(e) {
 
            if(db.objectStoreNames.contains(“todo”)) {
 
              db.deleteObjectStore(“todo”);
 
            }
 
    
 
            var store = db.createObjectStore(“todo”,
 
              {keyPath: “timeStamp”});
 
            e.target.transaction.oncomplete = function() {
 
              html5rocks.indexedDB.getAllTodoItems();
 
            };
 
          };
 
        } else {
 
          request.transaction.oncomplete = function() {
 
            html5rocks.indexedDB.getAllTodoItems();
 
          };
 
        }
 
      };
 
      request.onerror = html5rocks.indexedDB.onerror;
 
    };
 
    
 
    html5rocks.indexedDB.addTodo = function(todoText) {
 
      var db = html5rocks.indexedDB.db;
 
      var trans = db.transaction([“todo”], “readwrite”);
 
      var store = trans.objectStore(“todo”);
 
    
 
      var data = {
 
        “text”: todoText,
 
        “timeStamp”: new Date().getTime()
 
      };
 
    
 
      var request = store.put(data);
 
    
 
      request.onsuccess = function(e) {
 
        html5rocks.indexedDB.getAllTodoItems();
 
      };
 
    
 
      request.onerror = function(e) {
 
        console.log(“Error
Adding: “, e);
 
      };
 
    };
 
    
 
    html5rocks.indexedDB.deleteTodo = function(id) {
 
      var db = html5rocks.indexedDB.db;
 
      var trans = db.transaction([“todo”], “readwrite”);
 
      var store = trans.objectStore(“todo”);
 
    
 
      var request = store.delete(id);
 
    
 
      request.onsuccess = function(e) {
 
        html5rocks.indexedDB.getAllTodoItems();
 
      };
 
    
 
      request.onerror = function(e) {
 
        console.log(“Error
Adding: “, e);
 
      };
 
    };
 
    
 
    html5rocks.indexedDB.getAllTodoItems = function() {
 
      var todos = document.getElementById(“todoItems”);
 
      todos.innerHTML = “”;
 
    
 
      var db = html5rocks.indexedDB.db;
 
      var trans = db.transaction([“todo”], “readwrite”);
 
      var store = trans.objectStore(“todo”);
 
    
 
      //
Get everything in the store;
 
      var cursorRequest = store.openCursor();
 
    
 
      cursorRequest.onsuccess = function(e) {
 
        var result = e.target.result;
 
        if(!!result == false)
 
          return;
 
    
 
        renderTodo(result.value);
 
        result.continue();
 
      };
 
    
 
      cursorRequest.onerror = html5rocks.indexedDB.onerror;
 
    };
 
    
 
    function renderTodo(row) {
 
      var todos = document.getElementById(“todoItems”);
 
      var li = document.createElement(“li”);
 
      var a = document.createElement(“a”);
 
      var t = document.createTextNode(row.text);
 
    
 
      a.addEventListener(“click”, function() {
 
        html5rocks.indexedDB.deleteTodo(row.timeStamp);
 
      }, false);
 
    
 
      a.textContent = ”
[Delete]”;
 
      li.appendChild(t);
 
      li.appendChild(a);
 
      todos.appendChild(li);
 
    }
 
    
 
    function addTodo() {
 
      var todo = document.getElementById(“todo”);
 
      html5rocks.indexedDB.addTodo(todo.value);
 
      todo.value = “”;
 
    }
 
    
 
    function init() {
 
      html5rocks.indexedDB.open();
 
    }
 
    
 
    window.addEventListener(“DOMContentLoaded”, init, false);
 
  </script>
  </head>
  <body>
 
  <ul id=”todoItems”></ul>
 
  <input type=”text” id=”todo” name=”todo” placeholder=”What
do you need to do?” style=”width:
200px;” />
 
  <input type=”submit” value=”Add
Todo Item” onclick=”addTodo();
return false;”/>
  </body>
</html>​

依据事务

不相同于一些观念的关全面据库的兑现,每三个对数据库操作是在3个事情的内外文中执行的。事务限制一回影响三个或七个object
stores,你通过传播2个object store名字的数组到成立工作限制的函数来定义。

始建工作的首个参数是事情方式。当呼吁三个事务时,必须控制是依照只读仍旧读写格局请求访问。事务是能源密集型的,所以只要您不必要更改data
store中的数据,你只须求以只读情势对object stores集合举行呼吁访问。

清单2演示了何等行使方便的情势开创三个工作,并在那片小说的 Implementing
Database-Specific Code
 部分开展了详细商讨。

IndexedDB是什么?

据悉请求

截止这里,有一个反复出现的核心,您恐怕曾经注意到。对数据库的每趟操作,描述为通过1个呼吁打开数据库,访问一个object
store,再持续。IndexedDB
API天生是基于请求的,那也是API异步性格提示。对于你在数据库执行的每一回操作,你必须首先为这几个操作创制一个伸手。当呼吁达成,你可以响应由请求结果发生的风云和不当。

本文已毕的代码,演示了什么样采纳请求打开数据库,创制2个作业,读取object
store的始末,写入object store,清空object store。

IndexedDB是目的存储,它不一样于带有表格(包罗行和列的聚众)的关周详据库。那是二个首要的常有分化,并且会潜移默化你设计和打造利用的方法。

开拓数据库的乞请生命周期

IndexedDB使用事件生命周期管理数据库的打开和安顿操作。图2示范了二个开辟的哀告在自然的条件下暴发upgrade
need事件。

皇家赌场手机版 3

图2:IndexedDB打开请求的生命周期

富有与数据库的并行初阶于1个打开的哀告。试图打开数据库时,您必须传递2个被呼吁数据库的本子号的整数值。在开拓请求时,浏览器相比你传入的用来打开请求的版本号与事实上数据库的版本号。假若所请求的版本号高于浏览器中当前的版本号(只怕将来从不存在的数据库),upgrade
needed事件触发。在uprade
need事件之间,你有空子通过添加或移除stores,键和索引来操纵object stores。

若果所请求的数据库版本号和浏览器的当前版本号一致,恐怕升级历程一鼓作气,3个开拓的数据库将重返给调用者。

 

不当冒泡

自然,有时候,请求大概不会按预想已毕。IndexedDB
API通过荒谬冒泡效果来援救跟踪和治本不当。倘诺三个特定的央浼碰着错误,你可以品味在央浼对象上处理错误,恐怕你可以允许错误通过调用栈冒泡向上传递。这些冒泡天性,使得你不需求为逐个请求落成特定错误处理操作,而是能够选用只在三个更高级别上添加错误处理,它给您3个时机,保持您的错误处理代码简洁。本文中落到实处的事例,是在3个高级别处理错误,以便更细粒度操作发生的其它错误冒泡到通用的错误处理逻辑。

在古板的关周密据存储中,大家有三个“待办事项”的报表,其中各行存储了用户待办事项数据的集聚,而各列则是数据的命名类型。要插入数据,平时采取如下语义:INSE奥迪Q5TINTO
Todo(id, data, update_time) VALUES (1, “Test”,”01/01/2010″);

浏览器协助

唯恐在开发Web应用程序最要害的难题是:“浏览器是或不是帮忙作者想要做的?“尽管浏览器对IndexedDB的支撑在继承拉长,接纳率并不是大家所梦想的这样普遍。图3呈现了caniuse.com网站的告知,协助IndexedDB的为66%多一点点。最新版本的银狐,Chrome,Opera,Safar,iOS
Safari,和Android完全帮助IndexedDB,Internet
Explorer和摩托罗拉部分帮助。固然那几个列表的扶助者是冲动的,但它从不报告全体故事。

皇家赌场手机版 4

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

只有可怜新本子的Safari和iOS Safari
匡助IndexedDB。据caniuse.com展现,那只占大致0.01%的举世浏览器采纳。IndexedDB不是多个你觉得可以理所当然拿到扶助的现代Web
API,可是你将高速会这么认为。

 

另一种接纳

浏览器帮忙本地数据库并不是从IndexedDB才起来兑现,它是在WebSQL贯彻之后的一种新章程。类似IndexedDB,WebSQL是三个客户端数据库,但它看做贰个关周详据库的兑现,使用结构化查询语言(SQL)与数据库通讯。WebSQL的野史充满了弯曲,但底线是从未有过主流的浏览器厂商对WebSQL继续协助。

比方WebSQL实际上是一个放弃的技术,为啥还要提它吧?有趣的是,WebSQL在浏览器里拿到巩固的协理。Chrome,
Safari, iOS Safari, and
Android 浏览器都辅助。其它,并不是这几个浏览器的风尚版本才提供支撑,许多那么些新颖最好的浏览器此前的版本也得以支撑。有趣的是,如若你为WebSQL添加支持来支撑IndexedDB,你突然发现,许多浏览器厂商和本子成为扶助浏览器内置数据库的某种化身。

之所以,如若您的应用程序真正要求三个客户端数据库,你想要达到的最高级其他利用或者,当IndexedDB不可用时,或然你的应用程序或者看起来要求接纳拔取WebSQL来支撑客户端数据架构。固然文档数据库和关周密据库管理数据有肯定的反差,但只要您有不易的架空,就可以接纳当地数据库打造1个应用程序。

IndexedDB的分裂之处在于,您可以创制有个别项目数据的对象存储,然后只需将JavaScript对象留存在该存储中即可。各个对象存储都足以有目录的联谊,那样就能开展飞速的查询和迭代。

IndexedDB是或不是合乎本人的应用程序?

距今最器重的标题:“IndexedDB是还是不是切合小编的应用程序?“像过去相同,答案是早晚的:“视情状而定。“首先当你打算在客户端保存数据时,你会考虑HTML5本土存储。本地存储得到广泛浏览器的支撑,有丰盛便于使用的API。不难有其优势,但其逆风局是无力回天支撑复杂的搜寻策略,存储大批量的多寡,并提供工作帮衬。

IndexedDB是一个数据库。所以,当你想为客户端做出决定,考虑你哪些在服务端接纳二个持久化介质的数据库。你或许会问本身有些标题来支持控制客户端数据库是或不是吻合你的应用程序,包涵:

  • 你的用户通过浏览器访问您的应用程序,(浏览器)支持IndexedDB API吗 ?
  • 您需求仓储大批量的数码在客户端?
  • 你须要在2个巨型的多寡集合中高速稳定单个数据点?
  • 你的架构在客户端须要工作辅助呢?

一经你对其中的其他难题回复了“是的”,很有可能,IndexedDB是你的应用程序的1个很好的候选。

 

使用IndexedDB

明日,你曾经有机遇熟悉了一部分的完全概念,下一步是起头兑现基于IndexedDB的应用程序。第1个步骤必要统一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个指针,用于在结果集以内迭代。

利用概述

在本教程中,您将学习如何成立3个运用IndexedDB存储数据的模块化JavaScript应用程序。为了打探应用程序是哪些做事的,参考图4,它描述了职务应用程序处于空白状态。从那边您可以为列表添加新职责。图5展现了录入了多少个义务到系统的画面。图6显示怎么删除1个任务,图7显示了正在编纂义务时的应用程序。

皇家赌场手机版 5

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

皇家赌场手机版 6

图5:任务列表

皇家赌场手机版 7

图6:删除职务

皇家赌场手机版 8

图7:编辑任务
前天您了然的应用程序的意义,下一步是发端为网站铺设基础。

 

铺设基础

那几个事例从落到实处那样一个模块起初,它承担从数据库读取数据,插入新的目标,更新现有对象,删除单个对象和提供在贰个object
store删除全体目标的选项。这么些事例达成的代码是通用的多寡访问代码,您可以在任何object
store上采用。

以此模块是由此一个立刻施行函数说明式(IIFE)完结,它利用对象字面量来提供社团。上面的代码是模块的摘要,表达了它的主导构造。

JavaScript

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

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

用如此的社团,能够使这一个应用程序的具有逻辑封装在三个名为app的单对象上。其它,数据库相关的代码在多个名为db的app子对象上。

本条模块的代码应用IIFE,通过传递window对象来保障模块的适当范围。使用use
strict确保那些函数的代码函数是根据(javascript严酷方式)严俊编译规则。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事件在开拓请求已毕前触发。这么些模块被设置为只使用1个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的名字到数组中。事务函数的第一个参数是2个格局。

只要事情请求可用,您就可以透过传递须要的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的3个可写实例。然后,检查数据对象的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可用,1个新的伏乞通过调用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 收藏
评论

在 2009 年 十二月 18 日,W3C发布弃用Web
SQL数据库规范。这约等于指出互连网开发人士不要再利用那种技术了,该专业也不会再拿到新的立异,而且不鼓励浏览器供应商援救该技能。

有关小编:cucr

皇家赌场手机版 9

博客园搜狐:@hop_ping
个人主页 ·
作者的文章 ·
17

皇家赌场手机版 10

 

代表的是
IndexedDB,本课程的主旨是开发人士应使用那种多少存储在客户端上囤积数据并进行操作。

 

各大主流浏览器(包涵Chrome浏览器、Safari、Opera等)和大致全数基于Webkit的位移设备均辅助WebSQL,并且很有大概在可预知的以后恭喜发财提供帮衬。

 

先决条件

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

 

[html] 

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

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

在一大半场合下,倘诺您使用的是索引型数据库,那么就会接纳异步API。异步API是非阻塞系统,由此不会经过再次回到值拿到数据,而是得到传递到内定回调函数的数据。

 

因此 HTML
协理IndexedDB是事务性的。在工作之外是不可能执行命令或打开指针的。事务包蕴如下类型:读/写作业、只读事务和快照事务。在本教程中,我们运用的是读/写作业。

 

第 1步:打开数据库

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

 

[html]

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

 

html5rocks.indexedDB.open = function() {

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

 

  request.onsuccess = function(e) {

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

    // Do some more stuff in a minute

  };

 

  request.onfailure = html5rocks.indexedDB.onerror;

};大家已打开名为“todos”的数据库,并已将其分配给html5rocks.indexedDB对象中的db变量。未来大家可以在整整课程中应用此变量来引用大家的数据库。

 

第 2步:创造对象存储

你不得不在“SetVersion”事务内创建对象存储。作者还不曾介绍setVersion,那是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属性可让单个对象在蕴藏中具有唯一性。本例中的该属性为“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_WRITE事务,并得到大家对象存储的引用。

 

既是使用有权访问对象存储,大家就足以经过基础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到目标存储中的代码一样,删除数据也很不难。运维3个作业,通过对象引用对象存储,然后通过对象的唯一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中的新增效益。互连网数据库托管并留存在用户的浏览器内。只要让开发人士通过丰富的询问成效创制应用,就可以预感到…

Leave a Comment.