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

来源：互联网发布：2017年复杂网络大会编辑：程序博客网时间：2024/05/24 06:33

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

<!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.onload=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.onerror=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").onclick=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,如何只是查询,那么就使用readonlyvar 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+"' onclick='getLinkDetails(this)'>detail</span>"+" "+"<span class='linkButton' data-id='"+linkRecord.Id+"' onclick='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.onerror=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.onerror=function(){alert(request.error+"occured");}request.onsuccess=function(){showLinks();resultsElement.innerHTML = "";}}</script></body></html>

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

阅读全文

0 0