深入解析HTML5中的In_dexedDB索引数据库_网页设计教程_MSDN 我告诉你
&　　介绍　　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.msIDBT　　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: &[email protected]& },　　{ id: &2&, name: &Bidulata&, age: 55, email: &[email protected]& }　　];　　现在我们需要用open()方法打开我们的数据库:　　JavaScript Code复制内容到剪贴板　　　　var request = indexedDB.open(&databaseName&, 1);　　request.onerror = function(e) {　　console.log(&error: &, e);　　};　　request.onsuccess = function(e) {　　db = request.　　console.log(&success: &+ db);　　};　　request.onupgradeneeded = function(e) {　　}　　如上所示，我们已经打开了名为&databaseName&，指定版本号的数据库，open()方法有两个参数：　　1.第一个参数是数据库名称，它会检测名称为&databaseName&的数据库是否已经存在，如果存在则打开它，否则创建新的数据库。　　2.第二个参数是数据库的版本，用于用户更新数据库结构。　　onSuccess处理　　发生成功事件时&onSuccess&被触发，如果所有成功的请求都在此处理，我们可以通过赋值给db变量保存请求的结果供以后使用。　　onerror的处理程序　　发生错误事件时&onerror&被触发，如果打开数据库的过程中失败。　　Onupgradeneeded处理程序　　如果你想更新数据库(创建，删除或修改数据库)，那么你必须实现onupgradeneeded处理程序，使您可以在数据库中做任何更改。
在&onupgradeneeded&处理程序中是可以改变数据库的结构的唯一地方。　　创建和添加数据到表：　　IndexedDB使用对象存储来存储数据，而不是通过表。 每当一个值存储在对象存储中，它与一个键相关联。 它允许我们创建的任何对象存储索引。
索引允许我们访问存储在对象存储中的值。 下面的代码显示了如何创建对象存储并插入预先准备好的数据：
下一篇：没有了
本站内容部份来至互联网，版权归原作者/公司所有。如有侵犯权益，请联系我删除！谢谢IndexedDB 开发指南 | 范圣刚的博客
电子邮件 (不会被公开)（必填）知识日常（13）
HTML5（3）
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：1812次
排名：千里之外
原创：13篇
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'html5的indexedDB数据库操作实例
我的图书馆
html5的indexedDB数据库操作实例
StringUtil.js
//去除字符串中间空格
String.prototype.Trim = function() {
return this.replace(/(^s*)|(s*$)/g,"");
//去除字符串左侧空格
String.prototype.LTrim = function() {
return this.replace(/(^s*)/g,"");
//去除字符串右侧空格
String.prototype.RTrim = function() {
return this.replace(/(s*$)/g,"");
//去除字符串中所有空格(包括中间空格,需要设置第2个参数为:g)
function Trim(str,is_global){
result = str.replace(/(^s+)|(s+$)/g,"");
if(is_global.toLowerCase()=="g")
result = result.replace(/s/g,"");
&indexedDB.js
window.onload = function(){
if(!window.indexedDB){
window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
var request = indexedDB.open("mydb");
request.onupgradeneeded = function(e){
//db = request.
db = e.target.
createObjectStore(db);
function createObjectStore(db){
if(db.objectStoreNames.contains("customer")){
db.deleteObjectStore("customer");
var objectStore = db.createObjectStore("customer",{keyPath:"id",autoIncrement:true});
objectStore.createIndex("name","name",{unique:false});
objectStore.createIndex("email","email",{unique:true});
objectStore.add({name:"Tom", sex:"male", age: 34, email:"tom@facebok.org"});
objectStore.add({name:"Jiny", sex:"female", age: 25, email:"jiny@home.org"});
objectStore.add({name:"Liam", sex:"male", age: 23, email:""});
request.onsuccess = function(e){
db = e.target.
if(!db.version=="1.0"){
var request = db.setVersion("1.0");
request.onsuccess = function(e){
createObjectStore(db);
showDataByCursor();
request.onerror = function(e){
showDataByCursor();
function showDataByCursor(objectStore){
if(!objectStore){
var transaction = db.transaction(["customer"]);
objectStore = transaction.objectStore("customer");
console.log("Store-Name :"+objectStore.name);
console.log("Store-KeyPath :"+objectStore.keyPath);
var request = objectStore.openCursor();
request.onsuccess = function(e){
var cursor = e.target.
if(cursor){
console.log(cursor.key);
console.log(cursor.value);
var data = cursor.
data.id = cursor.
showInTable(data);
cursor.continue();
request.onerror = function(e){
console.log("ERROR");
var table = document.getElementsByTagName("table")[0];
function showInTable(data){
//table.childNodes
var tbody = table.children[1];
//tbody = document.getElementsByTagName("tbody")[0];
var tr = document.createElement("tr");
var td_id = createTd(data,"id")
var checkBox=document.createElement("input");
checkBox.setAttribute("type","checkbox");
checkBox.setAttribute("name","check");
var textNode = td_id.childNodes[0];
checkBox.setAttribute("id",textNode.nodeValue);
//td_id.removeChild(textNode);
td_id.appendChild(checkBox);
//td_id.appendChild(textNode);
tr.appendChild(td_id);
var td_name = createTd(data,"name");
tr.appendChild(td_name);
var td_sex = createTd(data,"sex");
tr.appendChild(td_sex);
var td_age = createTd(data,"age");
tr.appendChild(td_age);
var td_email = createTd(data,"email");
tr.appendChild(td_email);
tbody.appendChild(tr);
function createTd(data,key){
var td = document.createElement("td");
td.contentEditable ="true";
var namedNodeMap = td.
var attrKey = document.createAttribute("key");
attrKey.value =
namedNodeMap.setNamedItem(attrKey);
var attrValue = document.createAttribute("value");
attrValue.value = data[key];
namedNodeMap.setNamedItem(attrValue);
var attrType = document.createAttribute("type");
attrType.value = typeof(data[key]);
namedNodeMap.setNamedItem(attrType);
td.innerText = data[key];
td.onblur = function(event){
console.log(this.parentNode.firstElementChild.innerText);
console.log(this.innerText.LTrim().RTrim());
console.log(this.attributes["value"].value);
console.log(this.attributes["key"].value);
console.log(this.innerText);
if(this.attributes["value"].value != this.innerText.LTrim().RTrim()){
saveOrUpdate(event.target);
//或saveOrUpdate(this)
function saveOrUpdate(obj){
var id = obj.parentNode.firstElementChild.innerT
var transaction = db.transaction(["customer"],"readwrite");
var objectStore = transaction.objectStore("customer");
var request = objectStore.get(parseInt(id));
//var range = IDBKeyRange.only("Donna");
//var request = objectStore.index("name").openCursor(range);
request.onsuccess = function(event){
if(event.target.result){
//objectStore.delete(id);
var data = event.target.
console.log("Update :"+ data);
var value = obj.attributes["type"].value=="number"?parseInt(obj.innerText):obj.innerT
data[obj.attributes["key"].value] =
var updateRequest = objectStore.put(data);
updateRequest.onsuccess = function(event){
//console.log(event.target);
console.log("UPDATE SUCCESS");
updateRequest.onerror = function(event){
console.log("UPDATE ERROR");
var data = {};
var tds = obj.parentNode.
for(var i=0;i&tds.i++){
var td = tds[i];
var key = td.attributes["key"].
data[key] = td.attributes["type"].value=="number"?parseInt(td.innerText):td.innerT
console.log("Add :"+ data);
var saveRequest = objectStore.add(data);
saveRequest.onsuccess = function(){
console.log("SAVE SUCCESS");
saveRequest.onerror = function(){
console.log("SAVE ERROR");
request.onerror = function(event){
alert(event);
var name = document.getElementsByName("name")[0];
var email = document.getElementsByName("email")[0];
var select = document.getElementsByTagName("button")[0];
select.onclick = function(event){
var value_name = name.value.LTrim().RTrim();
var value_email = email.value.LTrim().RTrim();
var transaction = db.transaction(["customer"],"readonly");
var objectStore = transaction.objectStore("customer");
var tbody = table.children[1];
var elements = tbody.
var count = elements.
for(var i=0;i&elements.){
//动态移除，没有i++，始终移除第一个
tbody.removeChild(elements[i]);
if(value_name==""&& value_email==""){
var request = objectStore.openCursor();
request.onsuccess = function(event){
var cursor = event.target.
if(cursor){
showInTable(cursor.value)
cursor.continue();
console.log("GETALL SUCCESS");
request.onerror = function(event){
console.log(event.target);
console.log("GETALL ERROR");
if(value_name!=""){
var range = IDBKeyRange.only(value_name);
var request = objectStore.index("name").openCursor(range);
request.onsuccess = function(event){
var cursor = event.target.
if(cursor){
console.log("key :"+cursor.key);
console.log("value :"+cursor.value);
showInTable(cursor.value)
cursor.continue();
console.log("SELECT BY NAME SUCCESS");
request.onerror = function(event){
console.log("SELECT BY NAME ERROR");
if(value_email!=""){
var range = IDBKeyRange.only(value_email);
var request = objectStore.index("email").openCursor(range);
request.onsuccess = function(event){
var cursor = event.target.
if(cursor){
console.log("key :"+cursor.key);
console.log("value :"+cursor.value);
showInTable(cursor.value)
cursor.continue();
console.log("SELECT BY EMIAL SUCCESS");
request.onerror = function(event){
console.log("SELECT BY EMAIL ERROR");
var checkAll = document.getElementsByName("checkAll")[0];
var btnDelete = document.getElementsByName("delete")[0];
var btnClear = document.getElementsByName("clear")[0];
checkAll.onclick = function(event){
var checkBoxs = document.getElementsByName("check");
console.log(checkBoxs);
if(this.checked==true){
for(var i=0;i&checkBoxs.i++){
checkBoxs[i].checked =
for(var i=0;i&checkBoxs.i++){
checkBoxs[i].checked =
btnDelete.addEventListener("click",function(event){
var checkBoxs = document.getElementsByName("check");
console.log(checkBoxs);
var transaction =
var objectStore =
var request =
for(var i=0;i&checkBoxs.i++){
var checkBox = checkBoxs[i];
if(checkBox.checked == true){
if(request == null){
transaction = db.transaction(["customer"],"readwrite");
objectStore = transaction.objectStore("customer");
var id = parseInt(checkBox.attributes["id"].value);
console.log("checked :"+id);
request = objectStore.get(id);
request.onsuccess = function(event){
if(event.target.result){
var record = event.target.
objectStore.delete(record.id);
for(var j=0;j&checkBoxs.j++){
if(checkBoxs[j].attributes["id"].value-record.id==0){
var tr = checkBoxs[j].parentElement.parentE
var tbody = checkBoxs[j].parentElement.parentElement.parentE
tbody.removeChild(tr);
console.log("DELETE SUCCESS");
request.onerror = function(event){
console.log("DELETE ERROR");
btnClear.addEventListener("click",function(event){
var objectStore = db.transaction(["customer"],"readwrite").objectStore("customer");
var request = objectStore.clear();
request.onsuccess = function(event){
console.log("CLEAR SUCCESS");
objectStore.openCursor().onsuccess = function(event){
var tbody = table.children[1];
var elements = tbody.
for(var i=0;i&elements.){
//动态移除，没有i++，始终移除第一个
tbody.removeChild(elements[i]);
var cursor = event.target.
if(cursor){
var data = cursor.
data.id = cursor.
showInTable(data);
cursor.continue();
console.log("SHOW SUCCESS");
request.onerror = function(event){
console.log("CLEAR ERROR");
&indexedDB.html
&!doctype html&
&meta charset="utf-8"/&
&title&IndexedDB&/title&
&script type="text/javascript"src="StringUtil.js"&&/script&
&!--&script type="text/javascript"src="jquery-1.8.3.js"&&/script&--&
&script type="text/javascript"src="indexedDB.js"&&/script&
&label&姓名：&input type="text"name="name"value=""style="width:50height:15"/&&/label&
&label&邮箱：&input type="text"name="email"value=""style="width:80height:15"/&&/label&
&button type="button"&查询&/button&
&th&ID&/th&
&th&姓名&/th&
&th&性别&/th&
&th&年龄&/th&
&th&邮箱&/th&
&td colspan="5"&
&label style="font-size:14px"&&input type="checkbox"name="checkAll"/&全选&/label&
&input type="button"name="delete"value="删除选中"/&
&input type="button"name="clear"value="清空数据库"/&
TA的最新馆藏
喜欢该文的人也喜欢微信公众号
使用HTML5管理IndexedDB数据库
HTML5 的一个重要特性是本地数据持久性，它使用户能够在线和离线访问 Web 应用程序。此外，本地数据持久性使移动应用程序更灵敏，使用的带宽更少，而且能够在低带宽场景中更高效地工作。HTML5 提供了一些本地数据持久性选项。第一个选项是 localstorage，它支持您使用一个简单的键值对来存储数据。IndexedDB（一个更加强大的选项）支持您本地存储大量对象，并使用健壮的数据访问机制检索数据。
IndexedDB API 取代了 Web Storage API，后者在 HTML5 规范中已不推荐使用。（但一些领先的浏览器仍然支持 Web Storage，其中包括苹果公司的 Safari 和 Opera Web 浏览器）与 Web Storage 相比，IndexedDB 具有多个优势，其中包括索引、事务处理和健壮的查询功能。本文将通过一系列的示例来展示如何管理 IndexedDB 数据库。
一个网站可能有一个或多个 IndexedDB 数据库，每个数据库必须具有惟一的名称。
一个数据库可包含一个或多个对象存储。一个对象存储（由一个名称惟一标识）是一个记录集合。每个记录有一个键 和一个值。该值是一个对象，可拥有一个或多个属性。键可能基于某个键生成器，从一个键路径衍生出来，或者是显式设置。一个键生成器自动生成惟一的连续正整数。键路径定义了键值的路径。它可以是单个 JavaScript 标识符或多个由句点分隔的标识符。
规范中包含一个异步 API 和一个同步 API。同步 API 用于 Web 浏览器中。异步 API 使用请求和回调。
在以下示例中，输出附加到一个具有 ID result 的 div 标记上。要更新 result 元素，可在每个数据操作期间清除并设置 innerHTML 属性。每个示例 JavaScript 函数由 HTML 按钮的一个 onclick 事件调用。
处理错误或异常和调试
所有异步请求都有一个 onsuccess 回调和一个 onerror 回调，前者在数据库操作成功时调用，后者在一个操作未成功时调用。清单 1 是一个 onerror 回调的示例。
清单 1. 异步错误处理函数
request.onerror = function(e) {
// handle error
console.log(&Database error: & + e.target.errorCode);
在使用 IndexedDB API 时，使用 JavaScript try/catch 块是一个不错的想法。此功能对处理可能在数据库操作之前发生的错误和异常很有用，比如在数据库未打开时尝试读取或操作数据，或者在另一个读/写事务已打开时尝试写入数据。
IndexedDB 很难调试和排除故障，因为在许多情况下，错误消息是泛泛的，缺乏信息价值。在开发应用程序时，可以使用 console.log 和 JavaScript 调试工具，比如用于 Mozilla Firefox 的 Firebug，或者 Chrome 内置的 Developer Tools。对于任何 JavaScript 密集型应用程序，这些工具的价值是无可估量的，它们尤其适用于使用 IndexedDB API 的 HTML5 应用程序。
使用数据库
一个数据库一次只能有一个版本。在首次创建数据库时，它的初始版本编号为 0。创建数据库之后，数据库（和它的对象存储）只能通过一种称为 versionchange 的特殊类型的事务来更改。要在创建数据库后更改它，必须打开具有更高版本的数据库。此操作会触发 upgradeneeded 事件。修改数据库或对象存储的代码必须位于 upgradeneeded 事件处理函数中。
清单 2 中的代码段展示了如何创建数据库：调用 open 方法并传递数据库名称。如果不存在具有指定名称的数据库，则会创建该数据库。
清单 2. 创建一个新的数据库
function createDatabase() {
var openRequest = localDatabase.indexedDB.open(dbName);
openRequest.onerror = function(e) {
console.log(&Database error: & + e.target.errorCode);
openRequest.onsuccess = function(event) {
console.log(&Database created&);
localDatabase.db = openRequest.
openRequest.onupgradeneeded = function (evt) {
要删除现有数据库，可以调用 deleteDatabase 方法，并传递要删除的数据库名称，如 清单 3 中所示。
清单 3. 删除现有数据库
function deleteDatabase() {
var deleteDbRequest = localDatabase.indexedDB.deleteDatabase(dbName);
deleteDbRequest.onsuccess = function (event) {
// database deleted successfully
deleteDbRequest.onerror = function (e) {
console.log(&Database error: & + e.target.errorCode);
清单 4 中的代码段展示了如何打开与现有数据库的连接。
清单 4. 打开数据库的最新版本
function openDatabase() {
var openRequest = localDatabase.indexedDB.open(&dbName&);
openRequest.onerror = function(e) {
console.log(&Database error: & + e.target.errorCode);
openRequest.onsuccess = function(event) {
localDatabase.db = openRequest.
创建、删除和打开数据库就是这么简单。现在是时候使用对象存储了。
其他类似的新闻
● ● ● ● ● ● ● ● ● ●
其他相关的新闻
大家感兴趣的内容
小伙伴最爱的新闻
小伙伴还关注了以下信息
小伙伴关注的焦点
小伙伴都在关注的热门词
Copyright (C)
ITHOV.COM Inc. All Rights Reserved
孝感风信信息技术有限公司 ● 版权所有