深入解析HTML5的IndexedDB索引数据库
介绍
indexeddb是html5 web数据库,允许html5 web应用在用户浏览器端存储数据。对于应用来说indexeddb非常强大、有用,可以在客户端的chrome,ie,firefox等web浏览器中存储大量数据,下面简单介绍一下indexeddb的基本概念。
什么是indexeddb
indexeddb,html5新的数据存储,可以在客户端存储、操作数据,可以使应用加载地更快,更好地响应。它不同于关系型数据库,拥有数据表、记录。它影响着我们设计和创建应用程序的方式。indexeddb 创建有数据类型和简单的javascript持久对象的object,每个object可以有索引,使其有效地查询和遍历整个集合。本文为您提供了如何在web应用程序中使用indexeddb的真实例子。
开始
我们需要在执行前包含下面前置代码
- 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
在创建数据库之前,我们首先需要为数据库创建数据,假设我们有如下的用户信息:
- var userdata = [
- { id: "1", name: "tapas", age: 33, email: "tapas@example.com" },
- { id: "2", name: "bidulata", age: 55, email: "bidu@home.com" }
- ];
现在我们需要用open()方法打开我们的数据库:
- 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使用对象存储来存储数据,而不是通过表。 每当一个值存储在对象存储中,它与一个键相关联。 它允许我们创建的任何对象存储索引。 索引允许我们访问存储在对象存储中的值。 下面的代码显示了如何创建对象存储并插入预先准备好的数据:
- request.onupgradeneeded = function(event) {
- var objectstore = event.target.result.createobjectstore("users", {keypath: "id"});
- for (var i in userdata) {
- objectstore.add(userdata[i]);
- }
- }
我们使用createobjectstore()方法创建一个对象存储。 此方法接受两个参数: - 存储的名称和参数对象。 在这里,我们有一个名为"users"的对象存储,并定义了keypath,这是对象唯一性的属性。 在这里,我们使用“id”作为keypath,这个值在对象存储中是唯一的,我们必须确保该“id”的属性在对象存储中的每个对象中存在。 一旦创建了对象存储,我们可以开始使用for循环添加数据进去。
手动将数据添加到表:
我们可以手动添加额外的数据到数据库中。
- 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”的对象:
- 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);
- };
- }
该opencursor()用于遍历数据库中的多个记录。 在continue()函数中继续读取下一条记录。
删除表中的记录
下面的方法从对象中删除记录。
- 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()方法。
最终代码
下面的方法从对象源中删除一条记录:
- <!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[i]);
- }
- }
- 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的连接比较麻烦,而且两个测试页面都需要用到
- //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,所以使用时还得考虑浏览器兼容。