前段时间在网上查到了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 即可)