澳门在线威尼斯官方 > 威尼斯澳门在线 > 深入解析HTML5中的IndexedDB索引数据库,前端的数据

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

浏览次数:115 时间:2019-09-15

前端的数据库:IndexedDB入门

2014/12/27 · 未分类 · IndexedDB

本文由 伯乐在线 - cucr 翻译,黄利民 校稿。未经许可,禁止转发!
立陶宛(Lithuania)语出处: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个参数(第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. 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管理。

目的旅舍

object store是IndexedDB数据库的底蕴。假若您接纳过关周到据库,平常能够将object store等价于叁个数量库表。Object stores满含二个或四个目录,在store中服从一对键/值操作,那提供一种高效稳固数据的章程。

当你安顿三个object store,你无法不为store采取三个键。键在store中能够以“in-line”或“out-of-line”的秘籍存在。in-line键通过在数码对象上引用path来保持它在object store的独一性。为了验证那一点,想想二个囊括电子邮件地址属性Person对象。您能够配备你的store使用in-line键emailAddress,它能确认保证store(长久化对象中的数据)的唯一性。其余,out-of-line键通过单独于数据的值识别独一性。在这种情景下,你可以把out-of-line键比作贰个大背头值,它(整数值)在关全面据库中充当记录的主键。

图1出示了职分数据保存在职责的object store,它使用in-line键。在那些案例中,键对应于对象的ID值。

依据事务

不相同于一些价值观的关周到据库的兑现,每三个对数据库操作是在八个政工的前后文中实践的。事务限制一回影响多个或多少个object stores,你通过传播三个object store名字的数组到创立职业限制的函数来定义。

成立职业的第1个参数是职业情势。当呼吁三个事务时,必得调控是遵循只读依旧读写情势要求访谈。事务是财富密集型的,所以假诺您不须求改换data store中的数据,你只要求以只读格局对object stores集结进行呼吁访谈。

清单2演示了怎样利用极度的形式开创贰个专业,并在那片作品的 Implementing Database-Specific Code 部分开展了详细钻探。

依附央求

直到这里,有一个往往出现的宗旨,您大概已经注意到。对数据库的每趟操作,描述为经过多少个呼吁展开数据库,访问二个object store,再持续。IndexedDB API天生是基于诉求的,这也是API异步天性指示。对于你在数据库实施的每一趟操作,你必须首先为那一个操作成立叁个伸手。当呼吁达成,你能够响应由诉求结果发生的事件和不当。

正文实现的代码,演示了怎么利用诉求展开数据库,创制八个作业,读取object store的剧情,写入object store,清空object store。

开发数据库的必要生命周期

IndexedDB使用事件生命周期管理数据库的展开和安顿操作。图2示范了二个开发的央浼在一定的条件下发生upgrade need事件。

图片 3

图2:IndexedDB张开恳求的生命周期

享有与数据库的竞相最早于三个开垦的央求。试图张开数据库时,您必得传递一个被呼吁数据库的本子号的整数值。在开拓诉求时,浏览器比较你传入的用于展开央求的版本号与事实上数据库的版本号。假设所央浼的版本号高于浏览器中当前的版本号(或许今后未有存在的数据库),upgrade needed事件触发。在uprade need事件之间,你有时机通过加多或移除stores,键和索引来垄断(monopoly)object stores。

万一所央求的数据库版本号和浏览器的当前版本号同样,只怕进级历程实现,贰个开垦的数据库将赶回给调用者。

错误冒泡

道理当然是那样的,有时候,央浼或然不会按预想完毕。IndexedDB API通过荒谬冒泡效果来增加帮衬追踪和管理破绽相当多。要是一个特定的乞求境遇错误,你能够尝尝在伸手对象上管理错误,或许您能够允许错误通过调用栈冒泡向上传递。那些冒泡本性,使得你无需为每种哀告实现特定错误管理操作,而是能够选用只在贰个更加高端别上增添错误处理,它给您多个空子,保持你的错误管理代码简洁。本文中落实的例证,是在多个高等别管理错误,以便越来越细粒度操作爆发的其他错误冒泡到通用的错误管理逻辑。

浏览器帮助

恐怕在支付Web应用程序最要害的主题材料是:“浏览器是不是帮助作者想要做的?“固然浏览器对IndexedDB的辅助在后续增进,选择率并非大家所希望的那么广泛。图3显得了caniuse.com网址的告知,援救IndexedDB的为66%多一丢丢。最新版本的银狐,Chrome,Opera,Safar,iOS Safari,和Android完全支持IndexedDB,Internet Explorer和Nokia部分帮忙。固然这一个列表的拥护者是欢欣的,但它从未报告全部故事。

图片 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来支撑客商端数据架构。纵然文书档案数据库和关周全据库管理数占领醒目标异样,但假使您有科学的聊以自慰,就足以运用本地数据库塑造三个应用程序。

本文由澳门在线威尼斯官方发布于威尼斯澳门在线,转载请注明出处:深入解析HTML5中的IndexedDB索引数据库,前端的数据

关键词:

上一篇:同构应用,入门教程

下一篇:没有了