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[i]); 
 
} 
 
} 



我们使用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复制内容到剪贴板


 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Add record 
 
Delete record 
 
Retrieve single record 
 
Retrieve all records 
 
 
 
 



锁
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); 
 
 }; 
 
})(); 
 
　　接着是两个测试页面 
 
 
 
 
 
 
 
 



把localStorage换成了indexedDB事务处理。但是结果就不同

测试的时候b.html中可能不会立即有
输出，因为indexedDB正忙着处理a.html东西，b.html事务丢在了事务丢队列中等待。但是无论如何，
输出结果也不会是1这个值。因为indexedDB的最小处理单位是事务，而不是localStorage那样以表达式为单位。这样只要把lock和unlock之间需要处理的东西放入一个事务中即可实现。另外，浏览器对indexedDB的支持不如localStorage，所以使用时还得考虑浏览器兼容。 




下载本文