前端数据库indexedDB

前段时间在网上查到了WEB SQL这个东西，感觉太好了，虽然H5有localStorage和sessionStorage,但功能还是太简单，并不能满足复杂性的存储。看到前端数据库，有了自己的数据库，前端可以玩的东西就更多了，然后开始研究WEB SQL，随后发现，这东西被W3C放弃了，他需要掌握SQl命令才能使用，有的前端人员是没有这块的知识的。所以就被现在的INDEXEDDB给代替了，而且INDEXEDDB直接存的就是JSON数据，而JS对JSON又是天生支持，完美。

INDEXEDDBb也是遵循同源同策略，一般APP用得比较多，网页端的话，数据不能跨流览器，所以。。。。。,,但对新东西还是很想去了解，学习

然后，又开始了INDEXEDDB的学习，按增删改查对功能进入了整理，现在和大家分享下：

一，创建数据库：

var qbl=
{
	db:"",
	version:10,
	tableName:'students',
}	
createDatabase=()=>{
	if (!window.indexedDB) {alert("您的浏览器不支持数据存储功能，请更换或升级")}
	//window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
	var request=window.indexedDB.open("mySQL",qbl.version);
	/*
	 * request   IDBOpenDBRequest对象，此对象中包含我们要使用的数据库
	 * 
	 */
	request.onerror=function(event){
		alert("mySQL数据库打开失败");
	}
	request.onsuccess=function(event){
		alert("数据库打开成功");
		qbl.db=request.result; //DB对像在request.rusult
		//console.log(request.result);
	}
	request.onupgradeneeded=function(event){//请求数据库版本变化回调
		qbl.db=event.target.result;
		if(!qbl.db.objectStoreNames.contains(qbl.tableName))
		{
			var objStore=qbl.db.createObjectStore(qbl.tableName,{keyPath:"id"});  //objectStore,表的概念
			 objStore.createIndex("id","id", { unique: false });
			 objStore.createIndex('name', '');
			 objStore.createIndex('age', "");
			 objStore.createIndex('aihao', '');
		}
		else
		{
			alert("have database"+qbl.tableName)
		}
	}
}

测试数据，所以只放了四个字段，且ID为主键，不可重复。这里有需要注意的地方，就是这个VERSION,版本号，这个版本号只能为整数，（没有新建，有则打开，版本号到了5，如果再去连接4版本，则会报错）。版本号在发生变化时，也会调用回调函数

request.onupgradeneeded=function(event){.........}

二，添加数据：

/*
 * addData
 */
btnAdd=()=>{
    
	var students=[
	   { id:parseInt(document.getElementById("id").value),
    
    	name:document.getElementById("name").value, 
		age:document.getElementById("age").value,
		aihao:document.getElementById("aihao").value
		}
	];
	addData(qbl.db,students,qbl.tableName)
}
addData=(db,dataArr,storeName)=>{
	//storeName  表名称
	var transaction=db.transaction(storeName,'readwrite');//readwrite  read versionchange    
	var store=transaction.objectStore(storeName);
	for(let i=0;i<dataArr.length;i++)
	{
		
		var resquest=store.add(dataArr[i]);
		resquest.onerror=function(){alert("insert   store   error")};
		resquest.onsuccess=function(){alert("insert   store   success")};
	}
}

INDEXEDDB对于数据库的操作，都是基础于transaction事务的，创建事务接收两个参数，表名称和读写权限，我这里给的权限读写都可以‘readwrite’。

三，删除数据

delRow=()=>{
	var id=parseInt(document.getElementById("delid").value);
	var store = qbl.db.transaction(qbl.tableName,"readwrite").objectStore(qbl.tableName);
	 var objectStoreRequest = store.delete(id);
	 objectStoreRequest.onsuccess=function(){
	 	alert("delete ok")
	 }
}

这里就不多说了，还是创建事务，在事务中对数据进行删除（ID为整数，如果是STRING，则删除不成功）.

四，查找和修改

search=()=>{
  var id=parseInt(document.getElementById("searchid").value);
  alert(id)
  var store = qbl.db.transaction(qbl.tableName).objectStore(qbl.tableName);
	 
	store.openCursor().onsuccess = function(event)
	{  
	   var cursor = event.target.result;
	      
		if (cursor)
		{
		   alert(JSON.stringify(cursor.value))
		   if(cursor.value.id==id)
		   {
		    // alert("找到了"+cursor.value.name);
			  document.getElementById("xgname").value=cursor.value.name;
			  document.getElementById("xgage").value=cursor.value.age;
			  document.getElementById("xgaihao").value=cursor.value.aihao;
			
		   }
			cursor.continue();
		} 
		else 
		{	
		}
	}
}
editData=()=>{
	var data={
	          name:document.getElementById("xgname").value,
			  age:document.getElementById("xgage").value,
			  aihao:document.getElementById("xgaihao").value
			  }
	var transaction = qbl.db.transaction(qbl.tableName, "readwrite");
            // 打开已经存储的数据对象
			
            var objectStore = transaction.objectStore(qbl.tableName);
            var objectStoreRequest = objectStore.get(parseInt(document.getElementById("searchid").value));
            objectStoreRequest.onsuccess = function(event) {
            	var myRecord = objectStoreRequest.result;
                // 遍历替换
                for (var key in data) {
                    if (typeof myRecord[key] != 'undefined') {
                        myRecord[key] = data[key];
                        alert("changeOk")
                    }
                }
                // 更新数据库存储数据                
                objectStore.put(myRecord);
            }
}

我在火狐，谷歌，360极速测试可行，下面把整整个源码贴出来，方便各位同仁进行测试。

<!DOCTYPE html>
<html>
	<meta charset="UTF-8"/>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
	</head>
	<style type="text/css">
	body{ background:#f6f6f6;}
	.block{ background:#fff; margin-bottom:10px; border:1px solid #ddd; padding:20px 20px}
		table tr td{
			width:100px;
			padding:10px 0px;
			text-align: center;
			border-bottom: 1px solid #ddd;
		}
	</style>
	<body>
	
	
	   <div class="block">
		   <p>连接数据库    （表名：students,版本：10）</p>
			
			<button onclick="createDatabase()">create database</button>
	   </div>
	   
	   
		<div class="block">
		    <p>添加数据</p>
		    <input type="text" id="id" placeholder="ID">
			<input type="text" id="name" placeholder="姓名">
			<input type="text" id="age" placeholder="年龄">
			<input type="text" id="aihao" placeholder="爱好">
			<button onclick="btnAdd()">addData</button>
		</div>
		
		
		<div  class="block">
		    <p>删除数据</p>
		   <input type="text" id="delid" placeholder="要删除的ID"><button onclick="delRow()">delRow</button>
		</div>
		
		
	    <div  class="block">
		  <p>查找，修改</p>
		  <input type="text" value="" id="searchid" placeholder="请输入要查找的ID">
		  <button onclick="search()">search</button>
		  <br><br>
		  <div>
			<input type="text" id="xgname" placeholder="姓名">
			<input type="text" id="xgage" placeholder="年龄">
			<input type="text" id="xgaihao" placeholder="爱好">
			<button onclick="editData()">edit</button>
		  </div>
		</div>
		
		
		<div class="block">
		  <p>获取最新数据库数据</p>
		  <button onclick="getIndexedDB()">getIndexedDB</button>
		  <table id="table" style="border: 1px solid #ddd;"></table>
		</div>
		
		
		<div class="block">
		  <p>关闭 OR  删除</p>
		  <button onclick="closeDatabase()">close database</button>
		<button onclick="deleteDatabase()">delete database</button>
		删除库只有所有记录删除后才可操作成功
		</div>
		
	</body>
</html>

<script type="text/javascript">
var qbl=
{
	db:"",
	version:10,
	tableName:'students',
}	
createDatabase=()=>{
	if (!window.indexedDB) {alert("您的浏览器不支持数据存储功能，请更换或升级")}
	//window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
	var request=window.indexedDB.open("mySQL",qbl.version);
	/*
	 * request   IDBOpenDBRequest对象，此对象中包含我们要使用的数据库
	 * 
	 */
	request.onerror=function(event){
		alert("mySQL数据库打开失败");
	}
	request.onsuccess=function(event){
		alert("数据库打开成功");
		qbl.db=request.result; //DB对像在request.rusult
		//console.log(request.result);
	}
	request.onupgradeneeded=function(event){//请求数据库版本变化句柄
		qbl.db=event.target.result;
		if(!qbl.db.objectStoreNames.contains(qbl.tableName))
		{
			var objStore=qbl.db.createObjectStore(qbl.tableName,{keyPath:"id"});  //objectStore,表的概念
			 objStore.createIndex("id","id", { unique: false });
			 objStore.createIndex('name', '');
			 objStore.createIndex('age', "");
			 objStore.createIndex('aihao', '');
		}
		else
		{
			alert("have database"+qbl.tableName)
		}
	}
}
delRow=()=>{
	var id=parseInt(document.getElementById("delid").value);
	var store = qbl.db.transaction(qbl.tableName,"readwrite").objectStore(qbl.tableName);
	 var objectStoreRequest = store.delete(id);
	 objectStoreRequest.onsuccess=function(){
	 	alert("delete ok")
	 }
}

/*
 * addData
 */
btnAdd=()=>{
    
	var students=[
	   { id:parseInt(document.getElementById("id").value),
    
    	name:document.getElementById("name").value, 
		age:document.getElementById("age").value,
		aihao:document.getElementById("aihao").value
		}
	];
	addData(qbl.db,students,qbl.tableName)
}
addData=(db,dataArr,storeName)=>{
	//storeName  表名称
	var transaction=db.transaction(storeName,'readwrite');//readwrite  read versionchange    
	var store=transaction.objectStore(storeName);
	for(let i=0;i<dataArr.length;i++)
	{
		
		var resquest=store.add(dataArr[i]);
		resquest.onerror=function(){alert("insert   store   error")};
		resquest.onsuccess=function(){alert("insert   store   success")};
	}
}


/*
 * getINDEXEDDB
 */
getIndexedDB=()=>{
	var obj=document.getElementById("table");
        obj.innerHTML="";
	 var store = qbl.db.transaction(qbl.tableName).objectStore(qbl.tableName);
	 
	store.openCursor().onsuccess = function(event) {  
	    var cursor = event.target.result;
	    
    if (cursor) {
        // cursor.value就是数据对象
        // 游标没有遍历完，继续
        var tr=document.createElement("tr");
        for(i in cursor.value)
        {
        	var td=document.createElement("td")
        	td.innerHTML=cursor.value[i]
        	tr.appendChild(td)
        }
        obj.appendChild(tr)
        
       // alert(JSON.stringify(cursor.value))
        cursor.continue();
    } else {
      
    }
	}
}
search=()=>{
  var id=parseInt(document.getElementById("searchid").value);
  alert(id)
  var store = qbl.db.transaction(qbl.tableName).objectStore(qbl.tableName);
	 
	store.openCursor().onsuccess = function(event)
	{  
	   var cursor = event.target.result;
	      
		if (cursor)
		{
		   alert(JSON.stringify(cursor.value))
		   if(cursor.value.id==id)
		   {
		    // alert("找到了"+cursor.value.name);
			  document.getElementById("xgname").value=cursor.value.name;
			  document.getElementById("xgage").value=cursor.value.age;
			  document.getElementById("xgaihao").value=cursor.value.aihao;
			
		   }
			cursor.continue();
		} 
		else 
		{	
		}
	}
}
editData=()=>{
	var data={
	          name:document.getElementById("xgname").value,
			  age:document.getElementById("xgage").value,
			  aihao:document.getElementById("xgaihao").value
			  }
	var transaction = qbl.db.transaction(qbl.tableName, "readwrite");
            // 打开已经存储的数据对象
			
            var objectStore = transaction.objectStore(qbl.tableName);
            var objectStoreRequest = objectStore.get(parseInt(document.getElementById("searchid").value));
            objectStoreRequest.onsuccess = function(event) {
            	var myRecord = objectStoreRequest.result;
                // 遍历替换
                for (var key in data) {
                    if (typeof myRecord[key] != 'undefined') {
                        myRecord[key] = data[key];
                        alert("changeOk")
                    }
                }
                // 更新数据库存储数据                
                objectStore.put(myRecord);
            }
}
/*
 * 
 * closeDB(数据库名);
 * indexedDB.deleteDatabase(数据库名)
 */
closeDatabase=()=>{
	var x=qbl.db.close();
	 //qbl.version=1;
	alert("ok")
	
}
deleteDatabase=()=>{
	indexedDB.deleteDatabase(qbl.db.name);
	qbl.version=1;
	alert("已删除")
}

</script>

有问题或BUG，请联系QQ：837927397（问题答案：CSDN 即可）

前端数据库indexedDB

猜你喜欢