• 售前

  • 售后

热门帖子
入门百科

深入解析HTML5的IndexedDB索引数据库

[复制链接]
老三是叔叔 显示全部楼层 发表于 2021-10-26 13:41:45 |阅读模式 打印 上一主题 下一主题
先容
IndexedDB是HTML5 WEB数据库,允许HTML5 WEB应用在用户浏览器端存储数据。对于应用来说IndexedDB非常强盛、有效,可以在客户端的chrome,IE,Firefox等WEB浏览器中存储大量数据,下面简单先容一下IndexedDB的根本概念。

什么是IndexedDB
IndexedDB,HTML5新的数据存储,可以在客户端存储、操作数据,可以使应用加载地更快,更好地响应。它差别于关系型数据库,拥有数据表、记录。它影响着我们设计和创建应用步调的方式。IndexedDB 创建有数据范例和简单的JavaScript持久对象的object,每个object可以有索引,使其有效地查询和遍历整个集合。本文为您提供了如安在Web应用步调中利用IndexedDB的真实例子。

开始
我们需要在实验前包含下眼前置代码
JavaScript Code复制内容到剪贴板
       
  • var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;      
  •         
  • //prefixes of window.IDB objects      
  • var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;      
  • var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange      
  •         
  • if (!indexedDB) {      
  • alert("Your browser doesn't support a stable version of IndexedDB.")      
  • }  

打开IndexedDB
在创建数据库之前,我们起首需要为数据库创建数据,假设我们有如下的用户信息:
JavaScript Code复制内容到剪贴板
       
  • var userData = [      
  • { id: "1", name: "Tapas", age: 33, email: "tapas@example.com" },      
  • { id: "2", name: "Bidulata", age: 55, email: "bidu@home.com" }      
  • ];  
如今我们需要用open()方法打开我们的数据库:
JavaScript Code复制内容到剪贴板
       
  • var db;      
  • var request = indexedDB.open("databaseName", 1);      
  •         
  • request.onerror = function(e) {      
  • console.log("error: ", e);      
  • };      
  •         
  • request.onsuccess = function(e) {      
  • db = request.result;      
  • console.log("success: "+ db);      
  • };      
  • request.onupgradeneeded = function(e) {      
  •         
  • }  
如上所示,我们已经打开了名为"databaseName",指定版本号的数据库,open()方法有两个参数:
1.第一个参数是数据库名称,它会检测名称为"databaseName"的数据库是否已经存在,如果存在则打开它,否则创建新的数据库。
2.第二个参数是数据库的版本,用于用户更新数据库结构。

onSuccess处置处罚
发生乐成变乱时“onSuccess”被触发,如果全部乐成的哀求都在此处置处罚,我们可以通过赋值给db变量生存哀求的效果供以后利用。

onerror的处置处罚步调
发生错误变乱时“onerror”被触发,如果打开数据库的过程中失败。

Onupgradeneeded处置处罚步调
如果你想更新数据库(创建,删除或修改数据库),那么你必须实现onupgradeneeded处置处罚步调,使您可以在数据库中做任何更改。 在“onupgradeneeded”处置处罚步调中是可以改变数据库的结构的唯一地方。

创建和添加数据到表:
IndexedDB利用对象存储来存储数据,而不是通过表。 每当一个值存储在对象存储中,它与一个键相干联。 它允许我们创建的任何对象存储索引。 索引允许我们访问存储在对象存储中的值。 下面的代码表现了怎样创建对象存储并插入预先准备好的数据:
JavaScript Code复制内容到剪贴板
       
  • request.onupgradeneeded = function(event) {      
  • var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});      
  • for (var i in userData) {      
  • objectStore.add(userData);        
  • }      
  • }  
我们利用createObjectStore()方法创建一个对象存储。 此方法接受两个参数: - 存储的名称和参数对象。 在这里,我们有一个名为"users"的对象存储,并界说了keyPath,这是对象唯一性的属性。 在这里,我们利用“id”作为keyPath,这个值在对象存储中是唯一的,我们必须确保该“ID”的属性在对象存储中的每个对象中存在。 一旦创建了对象存储,我们可以开始利用for循环添加数据进去。

手动将数据添加到表:
我们可以手动添加额外的数据到数据库中。
JavaScript Code复制内容到剪贴板
       
  • function Add() {      
  • var request = db.transaction(["users"], "readwrite").objectStore("users")      
  • .add({ id: "3", name: "Gautam", age: 30, email: "gautam@store.org" });      
  •         
  • request.onsuccess = function(e) {      
  • alert("Gautam has been added to the database.");      
  • };      
  •         
  • request.onerror = function(e) {      
  • alert("Unable to add the information.");        
  • }      
  •         
  • }  
之前我们在数据库中做任何的CRUD操作(读,写,修改),必须利用事务。 该transaction()方法是用来指定我们想要举行事务处置处罚的对象存储。 transaction()方法接受3个参数(第二个和第三个是可选的)。 第一个是我们要处置处罚的对象存储的列表,第二个指定我们是否要只读/读写,第三个是版本厘革。

从表中读取数据
get()方法用于从对象存储中检索数据。 我们之前已经设置对象的id作为的keyPath,所以get()方法将查找具有相同id值的对象。 下面的代码将返回我们定名为“Bidulata”的对象:
JavaScript Code复制内容到剪贴板
       
  • function Read() {      
  • var objectStore = db.transaction(["users"]).objectStore("users");      
  • var request = objectStore.get("2");      
  • request.onerror = function(event) {      
  • alert("Unable to retrieve data from database!");      
  • };      
  • request.onsuccess = function(event) {        
  • if(request.result) {      
  • alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);      
  • } else {      
  • alert("Bidulata couldn't be found in your database!");        
  • }      
  • };      
  • }  

从表中读取全部数据
下面的方法检索表中的全部数据。 这里我们利用游标来检索对象存储中的全部数据:
JavaScript Code复制内容到剪贴板
       
  • function ReadAll() {      
  • var objectStore = db.transaction("users").objectStore("users");        
  • var req = objectStore.openCursor();      
  • req.onsuccess = function(event) {      
  • db.close();      
  • var res = event.target.result;      
  • if (res) {      
  • alert("Key " + res.key + " is " + res.value.name + ", Age: " + res.value.age + ", Email: " + res.value.email);      
  • res.continue();      
  • }      
  • };      
  • req.onerror = function (e) {      
  • console.log("Error Getting: ", e);      
  • };        
  • }  
该openCursor()用于遍历数据库中的多个记录。 在continue()函数中继续读取下一条记录。
删除表中的记录
下面的方法从对象中删除记录。
JavaScript Code复制内容到剪贴板
       
  • function Remove() {        
  • var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");      
  • request.onsuccess = function(event) {      
  • alert("Tapas's entry has been removed from your database.");      
  • };      
  • }  
我们要将对象的keyPath作为参数通报给delete()方法。

最终代码
下面的方法从对象源中删除一条记录:
JavaScript Code复制内容到剪贴板
       
  • <!DOCTYPE html>      
  • <head>      
  • <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />      
  • <title>IndexedDB</title>      
  • <script type="text/javascript">      
  • var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;      
  •         
  • //prefixes of window.IDB objects      
  • var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;      
  • var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange      
  •         
  • if (!indexedDB) {      
  • alert("Your browser doesn't support a stable version of IndexedDB.")      
  • }      
  • var customerData = [      
  • { id: "1", name: "Tapas", age: 33, email: "tapas@example.com" },      
  • { id: "2", name: "Bidulata", age: 55, email: "bidu@home.com" }      
  • ];      
  • var db;      
  • var request = indexedDB.open("newDatabase", 1);      
  •         
  • request.onerror = function(e) {      
  • console.log("error: ", e);      
  • };      
  •         
  • request.onsuccess = function(e) {      
  • db = request.result;      
  • console.log("success: "+ db);      
  • };      
  •         
  • request.onupgradeneeded = function(event) {      
  •         
  • }      
  • request.onupgradeneeded = function(event) {      
  • var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});      
  • for (var i in userData) {      
  • objectStore.add(userData);        
  • }      
  • }      
  • function Add() {      
  • var request = db.transaction(["users"], "readwrite")      
  • .objectStore("users")      
  • .add({ id: "3", name: "Gautam", age: 30, email: "gautam@store.org" });      
  •         
  • request.onsuccess = function(e) {      
  • alert("Gautam has been added to the database.");      
  • };      
  •         
  • request.onerror = function(e) {      
  • alert("Unable to add the information.");        
  • }      
  •         
  • }      
  • function Read() {      
  • var objectStore = db.transaction("users").objectStore("users");      
  • var request = objectStore.get("2");      
  • request.onerror = function(event) {      
  • alert("Unable to retrieve data from database!");      
  • };      
  • request.onsuccess = function(event) {        
  • if(request.result) {      
  • alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);      
  • } else {      
  • alert("Bidulata couldn't be found in your database!");        
  • }      
  • };      
  • }      
  • function ReadAll() {      
  • var objectStore = db.transaction("users").objectStore("users");        
  • var req = objectStore.openCursor();      
  • req.onsuccess = function(event) {      
  • db.close();      
  • var res = event.target.result;      
  • if (res) {      
  • alert("Key " + res.key + " is " + res.value.name + ", Age: " + res.value.age + ", Email: " + res.value.email);      
  • res.continue();      
  • }      
  • };      
  • req.onerror = function (e) {      
  • console.log("Error Getting: ", e);      
  • };        
  • }      
  • function Remove() {        
  • var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");      
  • request.onsuccess = function(event) {      
  • alert("Tapas's entry has been removed from your database.");      
  • };      
  • }      
  • </script>      
  • </head>      
  •         
  • <body>      
  • <button onclick="Add()">Add record</button>      
  • <button onclick="Remove()">Delete record</button>      
  • <button onclick="Read()">Retrieve single record</button>      
  • <button onclick="ReadAll()">Retrieve all records</button>      
  • </body>      
  • </html>  

localStorage是不带lock功能的。那么要实现前端的数据共享而且需要lock功能那就需要利用别的本储存方式,好比indexedDB。indededDB利用的是事务处置处罚的机制,那实际上就是lock功能。
  做这个测试需要先简单的封装下indexedDB的操作,由于indexedDB的连接比力麻烦,而且两个测试页面都需要用到

JavaScript Code复制内容到剪贴板
       
  • //db.js      
  • //封装事务操作      
  • IDBDatabase.prototype.doTransaction=function(f){      
  •   f(this.transaction(["Obj"],"readwrite").objectStore("Obj"));      
  • };      
  • //连接数据库,乐成后调用main函数      
  • (function(){      
  •   //打开数据库      
  •   var cn=indexedDB.open("TestDB",1);      
  •   //创建数据对象      
  •   cn.onupgradeneeded=function(e){      
  •     e.target.result.createObjectStore("Obj");      
  •   };      
  •   //数据库连接乐成      
  •   cn.onsuccess=function(e){      
  •     main(e.target.result);      
  •   };      
  • })();      
  •   接着是两个测试页面      
  • <script src="db.js"></script>      
  • <script>      
  • //a.html      
  • function main(e){      
  •   (function callee(){      
  •     //开始一个事务      
  •     e.doTransaction(function(e){      
  •       e.put(1,"test"); //设置test的值为1      
  •       e.put(2,"test"); //设置test的值为2      
  •     });      
  •     setTimeout(callee);      
  •   })();      
  • };      
  • </script>      
  • <script src="db.js"></script>      
  • <script>      
  • //b.html      
  • function main(e){      
  •   (function callee(){      
  •     //开始一个事务      
  •     e.doTransaction(function(e){      
  •       //获取test的值      
  •       e.get("test").onsuccess=function(e){      
  •         console.log(e.target.result);      
  •       };      
  •     });      
  •     setTimeout(callee);      
  •   })();      
  • };      
  • </script>  
把localStorage换成了indexedDB事务处置处罚。但是效果就差别

测试的时间b.html中可能不会立刻有输出,由于indexedDB正忙着处置处罚a.html东西,b.html事务丢在了事务丢队列中等候。但是无论怎样,输出效果也不会是1这个值。由于indexedDB的最小处置处罚单元是事务,而不是localStorage那样以表达式为单元。这样只要把lock和unlock之间需要处置处罚的东西放入一个事务中即可实现。别的,浏览器对indexedDB的支持不如localStorage,所以利用时还得思量浏览器兼容。

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作