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

前者的数据库:IndexedDB入门

2014/12/27 · 未分类 · 深远解析HTML5中的IndexedDB索引数据库,前端的数据库。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的多寡,浮现了数据库的布局

亚洲必赢官网 1

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

成套的IndexedDB API请参见完整文档

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

那篇小说紧要介绍了深刻解析HTML5中的IndexedDB索引数据库,包含事务锁等基本成效的相关应用示例,须求的情人能够参见下

介绍 IndexedDB是HTML5 WEB数据库,允许HTML5
WEB应用在用户浏览器端存储数据。对于使用来说IndexedDB非凡有力、有用,能够在客户端的chrome,IE,Firefox等WEB浏览器中贮存大批量多少,下边简单介绍一下IndexedDB的基本概念。
 
什么是IndexedDB IndexedDB,HTML5新的数额存储,可以在客户端存储、操作数据,可以使应用加载地更快,更好地响应。它不相同于关系型数据库,拥有数据表、记录。它影响着大家陈设和开创应用程序的法子。IndexedDB
创造有数据类型和精炼的JavaScript持久对象的object,每个object可以有目录,使其一蹴而就地询问和遍历整个集合。本文为您提供了什么在Web应用程序中使用IndexedDB的实际事例。
 
开始 咱俩必要在实施前包括上面前置代码

JavaScript
Code复制内容到剪贴板

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

 
打开IndexedDB 在创制数据库之前,大家率先须要为数据库创设数量,即使我们有如下的用户消息:

JavaScript
Code复制内容到剪贴板

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

现行大家需求用open()方法打开大家的数据库:

JavaScript
Code复制内容到剪贴板

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

如上所示,大家早已开辟了名为”databaseName”,指定版本号的数据库,open()方法有八个参数:
1.先是个参数是数据库名称,它会检测名称为”databaseName”的数据库是还是不是已经存在,假若存在则打开它,否则创设新的数据库。
2.次之个参数是数据库的版本,用于用户更新数据库结构。
 
onSuccess处理 爆发成功事件时“onSuccess”被触发,假若拥有成功的伸手都在此处理,我们得以经过赋值给db变量保存请求的结果供未来使用。
 
onerror的处理程序 发生错误事件时“onerror”被触发,倘使打开数据库的进度中破产。
 
Onupgradeneeded处理程序 借使你想翻新数据库(创制,删除或涂改数据库),那么您不可以不达成onupgradeneeded处理程序,使你能够在数据库中做此外变动。
在“onupgradeneeded”处理程序中是足以更改数据库的布局的唯一地点。
 
创建和添加数据到表:
IndexedDB使用对象存储来储存数据,而不是由此表。
每当一个值存储在对象存储中,它与一个键相关联。
它同意大家创设的别样对象存储索引。
索引允许大家访问存储在对象存储中的值。
上边的代码突显了什么样创造对象存储并插入预先准备好的数量:

JavaScript
Code复制内容到剪贴板

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

大家采纳createObjectStore()方法创制一个目标存储。 此方法接受四个参数:

  • 仓储的称谓和参数对象。
    在此间,大家有一个名为”users”的对象存储,并定义了keyPath,那是目的唯一性的性质。
    在那边,我们利用“id”作为keyPath,那么些值在目的存储中是绝无仅有的,大家亟须有限支撑该“ID”的属性在对象存储中的每个对象中设有。
    一旦创制了目标存储,我们可以起首使用for循环添加数据进去。
     
    手动将数据增进到表:
    咱俩得以手动添加额外的数码到数据库中。

JavaScript
Code复制内容到剪贴板

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

事先大家在数据库中做其余的CRUD操作(读,写,修改),必须运用工作。
该transaction()方法是用来指定大家想要举行事务处理的对象存储。
transaction()方法接受3个参数(首个和第多个是可选的)。
第四个是大家要处理的靶子存储的列表,第三个指定我们是或不是要只读/读写,第多个是本子变化。
 
从表中读取数据 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事务处理。不过结果就分裂

亚洲必赢官网 2

测试的时候b.html中恐怕不会霎时有出口,因为indexedDB正忙着处理a.html东西,b.html事务丢在了作业丢队列中等待。但是无论怎么着,输出结果也不会是1这一个值。因为indexedDB的纤维处理单位是工作,而不是localStorage那样以表明式为单位。那样一旦把lock和unlock之间要求处理的东西放入一个政工中即可完毕。别的,浏览器对indexedDB的协理不如localStorage,所以接纳时还得考虑浏览器包容。

那篇小说紧要介绍了深深解析HTML5中的IndexedDB索引数据库,包涵事务锁等基本成效的有关使…

简介

本文转自:

设计规范

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

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

 

对象仓库

object
store是IndexedDB数据库的基本功。假若你采用过关周全据库,平时可以将object
store等价于一个数额库表。Object
stores蕴含一个或多个目录,在store中按照一对键/值操作,那提供一种高效稳定数据的主意。

当你布置一个object
store,你必须为store选用一个键。键在store中可以以“in-line”或“out-of-line”的办法存在。in-line键通过在数量对象上引用path来保险它在object
store的唯一性。为了表明那点,想想一个包涵电子邮件地址属性Person对象。您可以布署你的store使用in-line键emailAddress,它能保障store(持久化对象中的数据)的唯一性。其余,out-of-line键通过独立于数据的值识别唯一性。在那种情形下,你可以把out-of-line键比作一个平头值,它(整数值)在关周密据库中充当记录的主键。

图1来得了任务数据保存在职分的object
store,它拔取in-line键。在这些案例中,键对应于对象的ID值。

 

<!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>​

根据事务

不一致于一些观念的关周详据库的兑现,每一个对数据库操作是在一个事情的内外文中执行的。事务限制一遍影响一个或四个object
stores,你通过传播一个object store名字的数组到开创工作限制的函数来定义。

创办工作的首个参数是工作格局。当呼吁一个事务时,必须决定是根据只读仍旧读写情势请求访问。事务是资源密集型的,所以如果你不须求更改data
store中的数据,你只须求以只读方式对object stores集合举办呼吁访问。

清单2演示了如何利用方便的方式开创一个业务,并在那片小说的 Implementing
Database-Specific Code
 部分举行了详实谈论。

IndexedDB是什么?

基于请求

以至于那里,有一个往往出现的主旨,您或许已经注意到。对数据库的历次操作,描述为经过一个呼吁打开数据库,访问一个object
store,再持续。IndexedDB
API天生是基于请求的,那也是API异步本性提示。对于你在数据库执行的每回操作,你必须首先为那个操作创建一个伸手。当呼吁完结,你可以响应由请求结果发生的风浪和不当。

本文完结的代码,演示了哪些运用请求打开数据库,成立一个工作,读取object
store的内容,写入object store,清空object store。

IndexedDB是目标存储,它不一致于带有表格(包罗行和列的成团)的关全面据库。这是一个最首要的根本分裂,并且会影响你设计和构建利用的法子。

打开数据库的哀求生命周期

IndexedDB使用事件生命周期管理数据库的开辟和计划操作。图2示范了一个开辟的央浼在自然的条件下爆发upgrade
need事件。

亚洲必赢官网 3

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

怀有与数据库的并行初叶于一个开辟的伸手。试图打开数据库时,您必须传递一个被呼吁数据库的本子号的整数值。在打开请求时,浏览器相比你传入的用于打开请求的版本号与事实上数据库的版本号。要是所请求的版本号高于浏览器中当前的版本号(或者现在从未存在的数据库),upgrade
needed事件触发。在uprade
need事件之间,你有时机通过抬高或移除stores,键和索引来操纵object stores。

设若所请求的数据库版本号和浏览器的当下版本号同样,或者升级历程连成一气,一个开拓的数据库将赶回给调用者。

 

错误冒泡

本来,有时候,请求可能不会按预想完结。IndexedDB
API通过荒谬冒泡效果来接济跟踪和保管不当。若是一个特定的呼吁碰到错误,你可以品味在呼吁对象上处理错误,或者你可以允许错误通过调用栈冒泡向上传递。那一个冒泡天性,使得你不须要为种种请求完毕特定错误处理操作,而是可以选拔只在一个更高级别上添加错误处理,它给你一个空子,保持您的错误处理代码简洁。本文中完成的例子,是在一个高级别处理错误,以便更细粒度操作暴发的任何不当冒泡到通用的错误处理逻辑。

在传统的关周详据存储中,我们有一个“待办事项”的表格,其中各行存储了用户待办事项数据的集合,而各列则是数量的命名类型。要插入数据,平常接纳如下语义:INSERTINTO
Todo(id, data, update_time) VALUES (1, “Test”,”01/01/2010″);

浏览器支持

莫不在付出Web应用程序最重大的问题是:“浏览器是还是不是支持自己想要做的?“尽管浏览器对IndexedDB的支撑在延续加强,选拔率并不是大家所期待的那样普遍。图3来得了caniuse.com网站的告诉,协助IndexedDB的为66%多一点点。最新版本的银狐,Chrome,Opera,Safar,iOS
Safari,和Android完全帮助IndexedDB,Internet
Explorer和HUAWEI部分支持。即便那些列表的拥护者是激动的,但它从未告知所有故事。

亚洲必赢官网 4

图3:浏览器对IndexedDB的接济,来自caniuse.com

只有丰富新本子的Safari和iOS Safari
协理IndexedDB。据caniuse.com展现,那只占大致0.01%的中外浏览器选择。IndexedDB不是一个你以为可以理所当然获得接济的现世Web
API,可是你将便捷会那样认为。

 

另一种拔取

浏览器协助本地数据库并不是从IndexedDB才起来兑现,它是在WebSQL兑现之后的一种新点子。类似IndexedDB,WebSQL是一个客户端数据库,但它看成一个关周全据库的落到实处,使用结构化查询语言(SQL)与数据库通讯。WebSQL的野史充满了弯曲,但底线是未曾主流的浏览器厂商对WebSQL继续协助。

一经WebSQL实际上是一个撇下的技术,为何还要提它呢?有趣的是,WebSQL在浏览器里得到巩固的协理。Chrome,
Safari, iOS Safari, and
Android 浏览器都帮忙。别的,并不是那么些浏览器的风尚版本才提供帮忙,许多那个新颖最好的浏览器之前的版本也得以帮忙。有趣的是,假诺您为WebSQL添加襄助来支撑IndexedDB,你突然发现,许多浏览器厂商和本子成为支撑浏览器内置数据库的某种化身。

因此,假如你的应用程序真正需求一个客户端数据库,你想要达到的最高级其他行使可能,当IndexedDB不可用时,也许你的应用程序可能看起来须求拔取使用WebSQL来援救客户端数据架构。即便文档数据库和关全面据库管理数据有同理可得的反差,但只要你有不利的悬空,就足以接纳当地数据库构建一个应用程序。

IndexedDB的分歧之处在于,您可以创建某个项目数据的目的存储,然后只需将JavaScript对象留存在该存储中即可。每个对象存储都可以有目录的集结,那样就能开展高效的询问和迭代。

IndexedDB是或不是符合自身的应用程序?

现在最根本的题材:“IndexedDB是还是不是顺应自身的应用程序?“像以往一模一样,答案是必定的:“视景况而定。“首先当你打算在客户端保存数据时,你会考虑HTML5本土存储。本地存储拿到普遍浏览器的支撑,有突出便于使用的API。不难有其优势,但其逆风局是心有余而力不足支撑复杂的检索策略,存储多量的数据,并提供工作扶助。

IndexedDB是一个数据库。所以,当您想为客户端做出决定,考虑你什么样在服务端采纳一个持久化介质的数据库。你或许会问自己有些问题来赞助控制客户端数据库是或不是适合您的应用程序,蕴涵:

  • 你的用户通过浏览器访问您的应用程序,(浏览器)协理IndexedDB API吗 ?
  • 您必要仓储大批量的数码在客户端?
  • 你须求在一个巨型的多寡集合中很快稳定单个数据点?
  • 您的架构在客户端需求工作帮衬吗?

要是您对内部的别的问题答疑了“是的”,很有可能,IndexedDB是你的应用程序的一个很好的候选。

 

使用IndexedDB

明天,你早就有空子熟习了一部分的一体化概念,下一步是始于兑现基于IndexedDB的应用程序。第四个步骤须要统一IndexedDB在差异浏览器的贯彻。您能够很容易地抬高各个厂商特性的接纳的检讨,同时在window对象上把它们设置为合法对象相同的称号。下边的清单显示了window.indexedDB,window.IDBTransaction,window.IDBKeyRange的终极结出是什么都被更新,它们被设置为相应的浏览器的特定完成。

JavaScript

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

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

近年来,每个数据库相关的大局对象具备正确的本子,应用程序可以准备使用IndexedDB先河工作。

IndexedDB 还取消了标准查询语言(
SQL)的概念,取而代之的是针对性索引的查询,那样可以暴发一个指南针,用于在结果集以内迭代。

采用概述

在本教程中,您将学习如何成立一个使用IndexedDB存储数据的模块化JavaScript应用程序。为了打探应用程序是如何是好事的,参考图4,它描述了任务应用程序处于空白状态。从这里你可以为列表添加新职分。图5来得了录入了多少个任务到系统的镜头。图6出示怎么删除一个义务,图7突显了正在编辑任务时的应用程序。

亚洲必赢官网 5

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

亚洲必赢官网 6

图5:职分列表

亚洲必赢官网 7

图6:删除义务

亚洲必赢官网 8

图7:编辑职分
今昔你熟识的应用程序的功力,下一步是起始为网站铺设基础。

 

铺设基础

其一例子从落成那样一个模块开端,它负责从数据库读取数据,插入新的靶子,更新现有对象,删除单个对象和提供在一个object
store删除所有目的的选项。那么些例子完成的代码是通用的数目访问代码,您可以在任何object
store上利用。

本条模块是因而一个马上施行函数表明式(IIFE)完结,它采取对象字面量来提供协会。下边的代码是模块的摘要,表达了它的主导构造。

JavaScript

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

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

用如此的协会,可以使那一个应用程序的具有逻辑封装在一个名为app的单对象上。其余,数据库相关的代码在一个名为db的app子对象上。

这几个模块的代码应用IIFE,通过传递window对象来有限帮忙模块的适宜限制。使用use
strict确保那几个函数的代码函数是根据(javascript严刻格局)严俊编译规则。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 收藏
评论

在 2010 年 六月 18 日,W3C发布弃用Web
SQL数据库规范。那也就是提出网络开发人员不要再选取那种技术了,该规范也不会再取得新的换代,而且不鼓励浏览器供应商支持该技术。

关于小编:cucr

亚洲必赢官网 9

搜狐腾讯网:@hop_ping
个人主页 ·
我的篇章 ·
17

亚洲必赢官网 10

 

代表的是
IndexedDB,本课程的焦点是开发人员应利用那种数据存储在客户端上囤积数据并拓展操作。

 

各大主流浏览器(蕴涵Chrome浏览器、Safari、Opera等)和大概拥有基于Webkit的活动设备均帮助WebSQL,并且很有可能在可预言的前程接二连三提供协理。

 

先决条件

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

 

[html] 

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

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

在大部气象下,假设你使用的是索引型数据库,那么就会采纳异步API。异步API是非阻塞系统,由此不会透过重临值得到多少,而是得到传递到指定回调函数的数量。

 

由此 HTML
接济IndexedDB是事务性的。在工作之外是无能为力执行命令或打开指针的。事务包蕴如下类型:读/写作业、只读事务和快照事务。在本教程中,我们应用的是读/写作业。

 

第 1步:打开数据库

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

 

[html]

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

 

html5rocks.indexedDB.open = function() {

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

 

  request.onsuccess = function(e) {

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

    // Do some more stuff in a minute

  };

 

  request.onfailure = html5rocks.indexedDB.onerror;

};我们已开拓名为“todos”的数据库,并已将其分配给html5rocks.indexedDB对象中的db变量。现在大家能够在总体课程中利用此变量来引用大家的数据库。

 

第 2步:创设对象存储

你不得不在“SetVersion”事务内创造对象存储。我还未曾介绍setVersion,那是一个可怜关键的形式,那是代码中绝无仅有可以供你成立对象存储和目录的地点。

 

[html]

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

  var request = indexedDB.open(“todos”,

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

 

  request.onsuccess = function(e) {

    var v = “1.0”;

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

    var db = html5rocks.indexedDB.db;

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

    if(v!= db.version) {

      var setVrequest = db.setVersion(v);

 

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

      setVrequest.onfailure = html5rocks.indexedDB.onerror;

      setVrequest.onsuccess = function(e) {

        var store = db.createObjectStore(“todo”,

          {keyPath: “timeStamp”});

 

        html5rocks.indexedDB.getAllTodoItems();

      };

    }

 

    html5rocks.indexedDB.getAllTodoItems();

  };

 

  request.onfailure = html5rocks.indexedDB.onerror;

}上述代码其实有不可胜计效果。大家在
API中定义了“open”方法,调用此格局即可打开“todos”数据库。打开请求不是随即实施的,而是回到IDBRequest。如若当前函数存在,则会调用indexedDB.open方法。那与我们不以为奇指定异步回调的方法略有差距,不过我们在回调执行前,有时机向IDBRequest对象附加我们协调的监听器。

 

一旦打开请求成功了,大家的
onsuccess回调就会执行。在此回调中,我们应反省数据库版本,即便与预期版本不符,则调用“setVersion”。

 

setVersion
是代码中绝无仅有能让大家转移数据库结构的地点。在setVersion中,大家可以成立和删除对象存储,以及构建和删除索引。调用setVersion可再次来到IDBRequest对象,供大家在中间附加回调。借使成功了,大家就起来创造对象存储。

 

因此对
createObjectStore单次调用制造对象存储。该方法会命名存储以及参数对象。参数对象更加主要,它可让您定义主要的可选属性。就我们而言,定义keyPath属性可让单个对象在蕴藏中负有唯一性。本例中的该属性为“timeStamp”。objectStore中储存的各种对象都必须有“timeStamp”。

 

创办了对象存储后,咱们调用 getAllTodoItems方法。

 

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

大家要构建的是待办事项列表管理器,因而必须求力所能及向数据库中添加待办事项。方法如下:

 

[html] 

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

  var db = html5rocks.indexedDB.db;

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

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

  var request = store.put({

    “text”: todoText,

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

  });

 

  request.onsuccess = function(e) {

    // Re-render all the todo’s

亚洲必赢官网,    html5rocks.indexedDB.getAllTodoItems();

  };

 

  request.onerror = function(e) {

    console.log(e.value);

  };

};addTodo方法分外简单,我们第一获得数据库对象的神速引用,初叶化READ_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到目的存储中的代码一样,删除数据也很简短。启动一个作业,通过对象引用对象存储,然后通过对象的唯一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伊夫(Eve)ntListener(“DOMContentLoaded”, init,
false);那要求用到可将数据取出 DOM的函数,即
html5rocks.indexedDB.addTodo方法: 

 

[html] 

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

IndexedDB是HTML5中的新增效益。网络数据库托管并留存在用户的浏览器内。只要让开发人员通过丰富的询问功效成立应用,就可以预知到…

网站地图xml地图