html5的indexedDB数据库操作实例

最新推荐文章于 2024-12-25 18:40:32 发布
原创 最新推荐文章于 2024-12-25 18:40:32 发布 · 300 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #indexedDB

这篇博客详细介绍了如何使用HTML5的indexedDB进行数据库操作，通过示例代码展示了如何创建数据库、存储数据以及查询数据的过程。示例中包含了StringUtil.js、indexedDB.js和indexedDB.html的相关内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

效果：



 代码：

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){ 
	var result; 
	result = str.replace(/(^s+)|(s+$)/g,""); 
	if(is_global.toLowerCase()=="g") 
	result = result.replace(/s/g,""); 
	return result; 
}

 indexedDB.js

window.onload = function(){
	if(!window.indexedDB){
		window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
	}
	
	var db = null;
	var request = indexedDB.open("mydb");
	request.onupgradeneeded = function(e){
		//db = request.result;
		db = e.target.result;
		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: "liam@163.com"});
	}
	
	request.onsuccess = function(e){
		db = e.target.result;
		if(!db.version=="1.0"){
			var request = db.setVersion("1.0");
			request.onsuccess = function(e){
				createObjectStore(db);
				showDataByCursor();
			}
			request.onerror = function(e){
				alert(e);
			}
		}else{
			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.result;
			if(cursor){
				console.log(cursor.key);
				console.log(cursor.value);
				var data = cursor.value;
				data.id = cursor.key;
				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.attributes;
		var attrKey = document.createAttribute("key");
		attrKey.value = key;
		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)
			}
		}
		return td;
	}

	function saveOrUpdate(obj){
		var id = obj.parentNode.firstElementChild.innerText;
		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.result;
				console.log("Update : " + data);
				var value = obj.attributes["type"].value=="number"?parseInt(obj.innerText):obj.innerText;
				data[obj.attributes["key"].value] = 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");
				}
			}else{
				var data = {};
				var tds = obj.parentNode.children;
				for(var i=0;i<tds.length;i++){
					var td = tds[i];
					var key = td.attributes["key"].value;
					data[key] = td.attributes["type"].value=="number"?parseInt(td.innerText):td.innerText;
				}
				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.children;
		var count = elements.length;
		for(var i=0;i<elements.length;){	//动态移除，没有i++，始终移除第一个
			tbody.removeChild(elements[i]);
		}
		if(value_name=="" && value_email==""){
			var request = objectStore.openCursor();
			request.onsuccess = function(event){
				var cursor = event.target.result;
				if(cursor){
					showInTable(cursor.value)
					cursor.continue();
				}
				console.log("GETALL SUCCESS");
			};
			request.onerror = function(event){
				console.log(event.target);
				console.log("GETALL ERROR");
			};
		}else{
			if(value_name!=""){
				var range = IDBKeyRange.only(value_name);
				var request = objectStore.index("name").openCursor(range);
				request.onsuccess = function(event){
					
					var cursor = event.target.result;
					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.result;
					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.length;i++){
				checkBoxs[i].checked = true;
			}
		}else{
			for(var i=0;i<checkBoxs.length;i++){
				checkBoxs[i].checked = false;
			}
		}
	}
	btnDelete.addEventListener("click",function(event){
		var checkBoxs = document.getElementsByName("check");
		console.log(checkBoxs);
		var transaction = null;
		var objectStore = null;
		var request = null;
		for(var i=0;i<checkBoxs.length;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.result;
						objectStore.delete(record.id);
						for(var j=0;j<checkBoxs.length;j++){
							if(checkBoxs[j].attributes["id"].value-record.id==0){
								var tr = checkBoxs[j].parentElement.parentElement;
								var tbody = checkBoxs[j].parentElement.parentElement.parentElement;
								tbody.removeChild(tr);
								break;
							}
						}
						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.children;
				for(var i=0;i<elements.length;){	//动态移除，没有i++，始终移除第一个
					tbody.removeChild(elements[i]);
				}
				var cursor = event.target.result;
				if(cursor){
					var data = cursor.value;
					data.id = cursor.key;
					showInTable(data);
					cursor.continue();
				}
				console.log("SHOW SUCCESS");
			}
		}
		request.onerror = function(event){
			console.log("CLEAR ERROR");
		}
	});
};

 indexedDB.html

<!doctype html>
<html>
	<head>
		<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>
	</head>
	<body>
		<div>
			<label>姓名：<input type="text" name="name" value="" style="width:50px;height:15px;"/></label>
			<label>邮箱：<input type="text" name="email" value="" style="width:80px;height:15px;"/></label>
			<button type="button">查询</button>
		</div>
		<table>
			<thead>
				<tr>
					<th>ID</th>
					<th>姓名</th>
					<th>性别</th>
					<th>年龄</th>
					<th>邮箱</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
			<tfoot>
				<tr>
					<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="清空数据库"/>
					</td>
				</tr>
			</tfoot>
		</table>
	</body>
</html>

 

indexedDB示例
qq_45457760的博客
04-19 436
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>...
深入解析 HTML5 Web IndexedDB 数据库：构建高效离线应用的基石
最新发布
Smell_of_earth的博客
04-18 1254
IndexedDB 是 HTML5 的客户端 NoSQL 数据库，支持键值对存储、事务等，适合离线及复杂数据处理，但 API 复杂、异步操作难上手 。
非常简单的indexedDB例子
02-19
非常简单的indexedDB例子,自己按照书上面写的， 用的是 visual studio 2012 做的 mvc3 程序。
indexeddb实例
苏暖午后
10-15 678
这里写代码片
indexedDB实例
07-29
html5 indexeddb 存储
HTML5 indexedDB数据库
shore‘s的博客
12-16 494
HTML5新增了一种被称为"indexedDB"数据库，是一种存储在客户端本地的NoSQL数据库。 三种事务：只读，读写，版本更新。 适配浏览器： window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB; window.IDBTran...
HTML5中indexedDB 数据库的使用实例
09-27
要连接IndexedDB数据库，首先需要调用`indexedDB.open`方法，传入数据库名和版本号。例如： ```javascript var request = indexedDB.open('dbName', 1); ``` 请求对象上的`onsuccess`和`onerror`事件分别用于...
18_HTML5 Web IndexedDB 数据库 --[HTML5 API 学习之旅]
桃园码工的博客
12-25 1329
HTML5 Web IndexedDB API 是一种在用户浏览器中存储大量结构化数据的机制，它允许存储和检索键值对，其中键可以是任何有效的JavaScript对象。IndexedDB 主要用于需要复杂查询的数据密集型Web应用。
html5 初试 indexedDB(推荐)
09-27
首先，我们来看如何打开或创建一个IndexedDB数据库。在JavaScript中，我们通过`window.indexedDB`全局对象来访问IndexedDB API。以下代码展示了打开数据库的基本步骤： ```javascript var indexedDB = window....
HTML5操作WebSQL数据库的实例代码
09-27
HTML5中的WebSQL是一种在客户端浏览器中使用的数据库存储机制，它允许开发者在浏览器中进行SQL数据库的查询和操作，类似本地数据库的操作方式。下面将详细介绍WebSQL数据库的知识点。 首先，WebSQL并不是HTML5的一...
lndexedDB 实践
小分享
09-25 407
原文链接：http://www.alloyteam.com/2019/09/13969/#prettyPhoto 原文作者：腾讯Web前端团队-TAT. zhongzhong 大纲 IndexedDB 介绍 IndexedDB vs Web SQL IndexDB 的核心对象 IndexedDB 的 CRUD IndexedDB 实践 IndexedDB 介绍 由浏览...
IndexedDB使用案例
ZDY_XJ的博客
03-15 567
IndexedDB使用案例
html5存储：indexedDB数据库使用
qq_23158083的博客
01-24 4094
IndexedDB 是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API。虽然 DOM 存储 对于存储少量数据是非常有用的，但是它对大量结构化数据的存储就显得力不从心了。IndexedDB 则提供了这样的一个解决方案。 IndexedDB 分别为同步和异步访问提供了单独的 API 。同步 API 本来是要用于仅供 Web Workers 内部使用，
HTML5本地存储之 indexedDB 完整实例及效果图展示
galaa2011的专栏
04-20 6763
浏览器indexedDB本地存储效果 (读者可使用支持indexedDB的浏览器测试效果，如：chrome...)
IndexedDB教程
w1405270578的博客
03-29 1038
介绍了 indexedDB 基础 API，以及相关的增删改查封装
web网站使用indexedDB缓存大数量案例
知识的灯塔，梦想的航船
04-11 491
前言及背景 indexedDB 是 html5 标准引入的web数据持久化方案之一，现代浏览器大多按照标准对其进行了实现，我在新的项目中用到它来作为持久化数据存储，由于最近在web端项目，每次web前端需要实时计算中间成果预计18G的中间过度数据，预计最终每次生成200M以上的结果数据，在此过程耗时30多秒，需要优化访问速度，仔细分析了算法没有办法在优化了，只能想办法缓存结果数据了，最后找了一圈...
indexedDB概念和实践
牧野流冰的博客
09-11 1064
indexedDB是 浏览器内置的 提供 客户端存储 大量结构化数据 基于js面向对象的 非关系型数据库。
浏览器数据库 IndexedDB 入门教程
細水、長流√的专栏
04-30 584
一、概述 随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。 现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，...
一行代码，搞定浏览器数据库 IndexedDB
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
02-26 437
前言2021 年，如果你的前端应用，需要在浏览器上保存数据，有三个主流方案可以选择：Cookie：上古时代就已存在，但能应用的业务场景非常有限LocalStorage：使用简单灵活，但是容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值