高大上的浏览器数据引擎IndexDB

痛定思痛。 2022-06-12 06:48 190阅读 0赞

直接上代码，相关的说明都在注释中了

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    	#links,#linkDetails{
    		margin-top: 100px;
    		width: 400px;
    		height: 300px;
    		border:1px solid red;
    		float:left;
    	}
    	.linkButton{
    		color:red;
    		cursor: pointer;
    		clear: both;
    	}
    	</style>
    </head>
    <body>
    	<div id="links"></div>
    	<div id="linkDetails"></div>
    	<input type="text" id="link">
    	<input type="text" id="name">
    	<button id="save">保存</button>
    	<script type="text/javascript">
    		var database;
    		var resultsElement;
    		// 数据对象
    		window.οnlοad=function(){
    			function LinkRecord(name,url){
    				this.name = name;
    				this.url = url;
    			}
    			// 创建并连接数据库,LinksDB是数据库的名称,1是数据库的版本
    			var request = window.indexedDB.open("LinksDB",1);
    			// 成功的时候时候执行
    			request.onsuccess = function(){
    				database = request.result;
    				// 读取数据库
    				showLinks();
    			}
    			// 失败的时候执行
    			request.οnerrοr=function(event){
    				alert(request.error+"failed");
    			}
    			// onupgradeneeded是事件在
    			// 请求的数据库版本是2,现有的数据库版本是1执行或者数据库根本不存在的时候触发
    			// 这时候浏览器会热情的创建一个空数据库,然后等你往里塞数据表
    			request.onupgradeneeded=function(e){
    				var db = request.result;
    				// 创建数据表
    				// autoIncrement自动生成唯一的数字
    				var objectStore = db.createObjectStore("Links",{keyPath:"Id",autoIncrement:true});
    			}
    			// 删除一个数据库
    			// window.indexDB.deleteDatabase()删除一个数据库
    			document.getElementById("save").οnclick=function(){
    				var oName = document.getElementById("name");
    				var oLink = document.getElementById("link");
    				var name = oName.value;
    				var link = oLink.value;
    				var linkRecord = new LinkRecord(name,link);
    				oName.value = "";
    				oLink.value = "";
    				// 插入,删除,更新使用readwrite,如何只是查询,那么就使用readonly
    				var transaction = database.transaction(['Links'],"readwrite");
    				var objectStore = transaction.objectStore("Links");
    				// 添加一条数据,如果存在相同的关键词,就替换
    				var request = objectStore.put(linkRecord);
    				//判断是否添加成功
    				request.onerror = function(e){
    					alert(request.error+"occurred");
    				}
    				// 如果成功的时候
    				request.onsuccess = function(e){
    					// 刷新显示
    					showLinks();
    				}
    			}
    		}
    		function showLinks(){
    			// 获取数据表
    			var transaction = database.transaction(["Links"],"readonly");
    			var objectStore = transaction.objectStore("Links");
    			//用存储对象的openCursor()方法创建游标
    			var request = objectStore.openCursor();
    			// 成功或者失败
    			var markupToInset = "";
    			request.onsuccess=function(){
    				// 同样使用游标遍历
    				var cursor = event.target.result;
    				if(cursor){
    					// 获取这条数据,数据以对象形式返回
    					var linkRecord = cursor.value;
    					markupToInset += linkRecord.Id;
    					markupToInset+="("+"<span class='linkButton' data-id='"+linkRecord.Id+"' οnclick='getLinkDetails(this)'>detail</span>"+" "+"<span class='linkButton' data-id='"+linkRecord.Id+"' οnclick='deleteLink(this)'>delete</span>"+")<br/>"
    					// 遍历下一条数据
    					cursor.continue();
    				}else{
    					if(markupToInset==""){
    						markupToInset = "<<这里没有链接>>";
    					}else{
    						markupToInset = "<i>链接如下：<br/></i>"+markupToInset;
    					}
    					// 插入代码
    					var resultsElement = document.getElementById("links");
    					resultsElement.innerHTML = markupToInset;
    				}
    			}
    			request.onerrot=function(){
    				alert(request.error+"occurred");
    			}
    		}
    		function getLinkDetails(ele){
    			// 从data-url获取链接
    			var id = Number(ele.getAttribute("data-id"));
    			var transaction = database.transaction(["Links"],"readonly");
    			var objectStore = transaction.objectStore("Links");
    			// 找到拥有这个url的数据
    			var request = objectStore.get(id);
    			request.οnerrοr=function(e){
    				alert(request.error+"occurred");
    			}
    			request.onsuccess=function(e){
    				var linkRecord = request.result;
    				resultsElement = document.getElementById("linkDetails");
    				resultsElement.innerHTML = "<b>"+linkRecord.name+"</b>"+"---"+"<b>"+linkRecord.url+"</b>";
    			}
    		}
    		function deleteLink(ele){
    			var id = Number(ele.getAttribute("data-id"));
    			var transaction = database.transaction(["Links"],"readwrite");
    			var objectStore = transaction.objectStore("Links");
    
    			var request = objectStore.delete(id);
    			request.οnerrοr=function(){
    				alert(request.error+"occured");
    			}
    			request.onsuccess=function(){
    				showLinks();
    				resultsElement.innerHTML = "";
    			}
    		}
    	</script>
    </body>
    </html>

最后补充说明一下兼容性，对于IE10及以上的支持，Firefox10及以上的支持，Chrome23及以上的支持，Safari不支持，Opera15及以上。可以看出现在对于大多数浏览器还是不支持，所以使用率比较低。但是这个的确是一个好东西，掌握一下未必不是一件好事。