您好，登录后才能下订单哦！
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
本篇内容主要讲解“HTML5的IndexedDB索引数据库实例分析”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“HTML5的IndexedDB索引数据库实例分析”吧!
介绍
IndexedDB是HTML5 WEB数据库，允许HTML5 WEB应用在用户浏览器端存储数据。对于应用来说IndexedDB非常强大，有用，可以在客户端的chrome，IE，Firefox等WEB浏览器中存储大量数据，下面简单介绍一下IndexedDB的基本概念。什么是IndexedDB IndexedDB，HTML5新的数据存储，可以在客户端存储，操作数据，可以使应用加载地交换，更好地响应。它具有关系型数据库，拥有数据表，索引。它创建了数据类型和简单的JavaScript持久对象的对象，每个对象可以有索引，可以有效地查询和遍历整个集合。此处为您提供了如何在Web应用程序中使用IndexedDB的真实示例。开始我们需要在执行前包含下面的代码
JavaScript代码将内容复制到
var indexedDB = window .indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
// window.IDB对象的前缀
var IDBTransaction = window .IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
var IDBKeyRange = window .IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
如果（！indexedDB）{
alert（“您的浏览器不支持稳定版本的IndexedDB。”）
}
：IndexedDB
在创建数据库之前，我们首先需要为数据库创建数据，假设我们有如下的用户信息：
JavaScript代码将内容复制到
var userData = [
{id：“ 1”，名称：“ Tapas”，年龄：33，电子邮件：“ tapas@example.com”}，
{id：“ 2”，名称：“ Bidulata”，年龄：55，电子邮件：“ bidu@home.com”}
];
现在我们需要用open（）方法打开我们的数据库：
JavaScript代码将内容复制到
var db;
var request = indexedDB .open（“ databaseName”，1）;
request.onerror = 函数（e）{
console.log（“ error：”，e）;
};
request.onsuccess = 函数（e）{
db = request .result;
console.log（“ success：” + db）;
};
request.onupgradeneeded = 函数（e）{
}
如上所示，我们已经打开了称为“数据库名称”，指定版本号的数据库，open（）方法有两个参数：1.第一个参数是数据库名称，它会检测名称为“数据库名称”的数据库是否已经存在，如果存在则打开它，否则创建新的数据库。2.第二个参数是数据库的版本，用于用户更新数据库结构。的onSuccess处理发生成功事件时“的onSuccess”被触发，如果所有成功的请求都在此处理，我们可以通过赋值给DB变量保存请求的结果供以后使用。的onerror的处理程序发生错误事件时“的onerror”被触发，如果打开数据库的过程中失败。Onupgradeneeded处理程序如果你想更新数据库（创建，删除或修改数据库），那么您必须实现onupgradeneeded处理程序，使您可以在数据库中做任何更改。在“ onupgradeneeded”处理程序中是可以更改数据库的结构的唯一地方。创建和添加数据到表：IndexedDB使用对象存储来存储数据，而不是通过表。索引一个值存储在对象存储中，它与一个键相关联。它允许我们创建任何对象存储索引。索引允许我们访问存储在对象存储中的值。下面的代码显示了如何创建对象存储并插入预先准备好的数据：
JavaScript代码将内容复制到
request.onupgradeneeded = 函数（事件）{
var objectStore = event .target.result.createObjectStore（“ users”，{keyPath：“ id”}）;
对于（var i in userData）{
objectStore.add（userData [i]）;
}
}
我们使用createObjectStore（）方法创建一个对象存储。此方法接受两个参数：-存储的名称和参数对象。在这里，我们有一个称为“ users”的对象存储，并定义了keyPath，这是对象唯一在这里，我们使用“ id”作为keyPath，这个值在对象存储中是唯一的，我们必须确保该“ ID”的属性在对象存储中的每个对象中存在。一旦创建了对象存储，我们可以开始使用循环添加数据进去。手动将数据添加到表：我们可以手动添加额外的数据到数据库中。
JavaScript代码将内容复制到
函数Add（）{
var request = db .transaction（[“ users”]，“ readwrite”）。objectStore（“ users”）
.add（{id：“ 3”，名称：“ Gautam”，年龄：30，电子邮件：“ gautam@store.org”}）；
request.onsuccess = 函数（e）{
alert（“ Gautam已添加到数据库。”）;
};
request.onerror = 函数（e）{
alert（“无法添加信息。”）;
}
}
该transaction（）方法是指定我们想要进行事务处理的对象存储。transaction（）方法接受3个参数（之前，在我们在数据库中做任何的CRUD操作（读，写，修改），必须使用事务。第二个和第三个是可选的）。第一个是我们要处理的对象存储的列表，第二个指定我们是否要替换/读取，第三个是版本变化。从表中读取数据的get（）方法用于从对象存储中检索数据。我们之前已经设置对象的ID作为的的keyPath，所以GET（）方法将查找具有相同的ID值的对象。下面的代码将返回我们命名为“Bidulata ”的对象：
JavaScript代码将内容复制到
函数Read（）{
var objectStore = db .transaction（[“ users”]）。objectStore（“ users”）;
var request = objectStore .get（“ 2”）;
request.onerror = 函数（事件）{
alert（“无法从数据库中检索数据！”）;
};
request.onsuccess = 函数（事件）{
if（request.result）{
alert（“名称：” + request.result.name +“，年龄：” + request.result.age +“，电子邮件：” + request.result.email）；
}其他{
alert（“在您的数据库中找不到Bidulata！”）;
}
};
}
从表中读取所有数据
下面的方法检索表中的所有数据。此处我们使用游标来检索对象存储中的所有数据：
JavaScript代码将内容复制到
函数ReadAll（）{
var objectStore = db .transaction（“ users”）。objectStore（“ users”）;
var req = objectStore .openCursor（）;
req.onsuccess = 函数（事件）{
db.close（）;
var res = event .target.result;
如果（res）{
alert（“ Key” + res.key +“是” + res.value.name +“，年龄：” + res.value.age +“，电子邮件：” + res.value.email）;
res.continue（）;
}
};
req.onerror = 函数 （e）{
console.log（“错误获取：”，e）;
};
}
该openCursor（）用于遍历数据库中的多个记录。在continue（）函数中继续读取下一条记录。删除表中的记录下面的方法从对象中删除记录。
JavaScript代码将内容复制到
函数Remove（）{
var request = db .transaction（[“ users”]，“ readwrite”）。objectStore（“ users”）。delete（“ 1”）;
request.onsuccess = 函数（事件）{
alert（“ Tapas的条目已从您的数据库中删除。”）;
};
}
我们将对象的keyPath作为参数传递给delete（）方法。最终代码下面的方法从对象源中删除一条记录：
JavaScript代码将内容复制到
<！DOCTYPE html >
<头>
< meta http-equiv = “ Content-Type” content = “ text / html; charset = utf-8” />
< title > IndexedDB </ title >
<脚本类型= “ text / javascript” >
var indexedDB = window .indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
// window.IDB对象的前缀
var IDBTransaction = window .IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;
var IDBKeyRange = window .IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
如果（！indexedDB）{
alert（“您的浏览器不支持稳定版本的IndexedDB。”）
}
var customerData = [
{id：“ 1”，名称：“ Tapas”，年龄：33，电子邮件：“ tapas@example.com”}，
{id：“ 2”，名称：“ Bidulata”，年龄：55，电子邮件：“ bidu@home.com”}
];
var db;
var request = indexedDB .open（“ newDatabase”，1）;
request.onerror = 函数（e）{
console.log（“ error：”，e）;
};
request.onsuccess = 函数（e）{
db = request .result;
console.log（“ success：” + db）;
};
request.onupgradeneeded = 函数（事件）{
}
request.onupgradeneeded = 函数（事件）{
var objectStore = event .target.result.createObjectStore（“ users”，{keyPath：“ id”}）;
对于（var i in userData）{
objectStore.add（userData [i]）;
}
}
函数Add（）{
var request = db .transaction（[“ users”]，“ readwrite”）
.objectStore（“用户”）
.add（{id：“ 3”，名称：“ Gautam”，年龄：30，电子邮件：“ gautam@store.org”}）；
request.onsuccess = 函数（e）{
alert（“ Gautam已添加到数据库。”）;
};
request.onerror = 函数（e）{
alert（“无法添加信息。”）;
}
}
函数Read（）{
var objectStore = db .transaction（“ users”）。objectStore（“ users”）;
var request = objectStore .get（“ 2”）;
request.onerror = 函数（事件）{
alert（“无法从数据库中检索数据！”）;
};
request.onsuccess = 函数（事件）{
if（request.result）{
alert（“名称：” + request.result.name +“，年龄：” + request.result.age +“，电子邮件：” + request.result.email）；
}其他{
alert（“在您的数据库中找不到Bidulata！”）;
}
};
}
函数ReadAll（）{
var objectStore = db .transaction（“ users”）。objectStore（“ users”）;
var req = objectStore .openCursor（）;
req.onsuccess = 函数（事件）{
db.close（）;
var res = event .target.result;
如果（res）{
alert（“ Key” + res.key +“是” + res.value.name +“，年龄：” + res.value.age +“，电子邮件：” + res.value.email）;
res.continue（）;
}
};
req.onerror = 函数 （e）{
console.log（“错误获取：”，e）;
};
}
函数Remove（）{
var request = db .transaction（[“ users”]，“ readwrite”）。objectStore（“ users”）。delete（“ 1”）;
request.onsuccess = 函数（事件）{
alert（“ Tapas的条目已从您的数据库中删除。”）;
};
}
</脚本>
</头>
<身体>
< button onclick = “ Add（）” >添加记录</ button >
< button onclick = “ Remove（）” >删除记录</ button >
< button onclick = “ Read（）” >检索单个记录</ button >
< button onclick = “ ReadAll（）” >检索所有记录</ button >
</ body >
</ html >
锁
localStorage是不带锁功能的。那么要实现前端的数据共享并且需要锁功能那就需要使用其他本存储方式，索引indexDB。indededDB使用的是事务处理的机制，那实际上就是锁功能。 做这个测试需要先简单的封装下indexedDB的操作，因为indexedDB的连接比较麻烦，而且两个测试页面都需要用到
JavaScript代码将内容复制到
//db.js
//封装事务操作
IDBDatabase.prototype.doTransaction =函数（f）{
f（this.transaction（[“ Obj”]，“ readwrite”）。objectStore（“ Obj”））;;
};
//连接数据库，成功后调用main函数
（功能（）{
//打开数据库
var cn = indexedDB .open（“ TestDB”，1）;
//创建数据对象
cn.onupgradeneeded =函数（e）{
e.target.result.createObjectStore（“ Obj”）;
};
//数据库连接成功
cn.onsuccess =函数（e）{
main（e.target.result）;
};
}）（）;
接下来是两个测试页面
<脚本src = “ db.js” > </脚本>
<脚本>
//a.html
函数main（e）{
（函数callee（）{
//开始一个事务
e.doTransaction（function（e）{
e.put（1，“ test”）; //设置test的数值1
e.put（2，“ test”）; //设置test的数值2
}）;
setTimeout（callee）;
}）（）;
};
</脚本>
<脚本src = “ db.js” > </脚本>
<脚本>
//b.html
函数main（e）{
（函数callee（）{
//开始一个事务
e.doTransaction（function（e）{
//获取测试的值
e.get（“ test”）. onsuccess =函数（e）{
console.log（e.target.result）;
};
}）;
setTimeout（callee）;
}）（）;
};
</脚本>
把本地存储换成indexedDB事务处理。但是结果就不同
测试的时候b.html中可能不会立即有输出，因为indexedDB正忙着处理a.html东西，b.html事务丢了了事务丢了中等待。但是无论如何，输出结果也不会是1这个值。因为indexedDB的最小处理单位是事务，而不是localStorage那以表达式为单位。这样只要把锁和解锁之间需要处理的东西放入一个事务中即可实现。另外，浏览器对indexedDB的支持不如localStorage，所以使用时还得考虑浏览器兼容。
到此，相信大家对“HTML5的IndexedDB索引数据库实例分析”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。