javascript 完全正确的数据库indexedDB

  1 //indexedDB
  2 var dbName = 'whx', version = '1', dbTableName = 'bbg', request, db, conCls, updateKey, fun = new Fun();
  3 function openDbs(){//请求数据库
  4     fun.elem('codeId').innerHTML += '打开数据库<br />';
  5     
  6     request.onupgradeneeded = function(e){
  7         fun.elem('codeId').innerHTML += '新的版本号<br />';
  8         var t = e.target.result;
  9         if(!t.objectStoreNames.contains(dbTableName)){
 10             var dbB = t.createObjectStore(dbTableName, {
 11                 keyPath : 'id',
 12                 autoIncrement : true
 13             });
 14             dbB.createIndex('id','id',{unique : false});
 15             fun.elem('codeId').innerHTML += '创建新表<br />';
 16         }
 17     }
 18     
 19     request.onsuccess = function(e){
 20         fun.elem('codeId').innerHTML += '旧的版本号<br />';
 21         db = e.target.result;//数据库对象
 22         fun.elem('codeId').innerHTML += '保存数据库对象<br />';
 23     }
 24     
 25     request.onerror = function(){
 26         fun.elem('codeId').innerHTML += '打开数据库失败<br />';
 27     }
 28     
 29     fun.display('consTxtId','none');//add content in table
 30     fun.value('sltId','','set');//add content in table
 31     fun.display('dbConId','block');//db btn
 32 }
 33 
 34 function close(){//关闭
 35     db.close();
 36     fun.elem('codeId').innerHTML += '关闭数据库<br />';
 37     db.onclose = function(){//没用...
 38         alert('close read');
 39     }
 40 }
 41 
 42 function deleteDb(){//删除
 43     indexedDB.deleteDatabase(dbName);
 44     fun.elem('codeId').innerHTML += '删除数据库<br />';
 45 }
 46 
 47 function showTb(){//查看表内容
 48     var setTable = db.transaction(dbTableName,'readwrite');//设置表权限
 49     fun.elem('codeId').innerHTML += '设置表权限<br />';
 50     
 51     var getTable = setTable.objectStore(dbTableName);//获取表对象
 52     fun.elem('codeId').innerHTML += '获取表对象<br />';
 53     
 54     var cursor = getTable.openCursor();//创建游标
 55     fun.elem('codeId').innerHTML += '创建游标<br />';
 56     
 57     fun.elem('codeId').innerHTML += '获取表信息<br />';
 58     
 59     fun.value('sltId','','set');
 60     
 61     cursor.onsuccess = function(e){
 62         var cursorObj = e.target.result;//获取游标对象
 63         console.log(cursorObj);
 64         if(cursorObj != null){
 65             fun.elem('sltId').innerHTML += "id : " + cursorObj.value.id + ", content : " + cursorObj.value.content + " <span onclick='conUpdate("+cursorObj.key+")'>修改</span> || <span onclick='conDelete("+cursorObj.key+")'>删除</span><br /><br />";
 66             if(cursorObj.key == 2){
 67                 //console.log(cursorObj.value);
 68             }
 69             cursorObj.continue();//游标移动下一个条
 70         }
 71     }
 72     
 73     cursor.onerror = function(){
 74         fun.elem('codeId').innerHTML += '创建游标失败<br />';
 75     }
 76 }
 77 
 78 function addCon(con){//添加
 79     var setTable = db.transaction(dbTableName,'readwrite');//设置表权限
 80     fun.elem('codeId').innerHTML += '设置表权限<br />';
 81     
 82     var getTable = setTable.objectStore(dbTableName);//获取表对象
 83     fun.elem('codeId').innerHTML += '获取表对象<br />';
 84     
 85     var conSet = getTable.add(con);
 86     conSet.onsuccess = function(){
 87         showTb();
 88         fun.elem('codeId').innerHTML += '添加内容成功<br />';
 89     }
 90 }
 91 
 92 function updateCon(key,con){//修改
 93     var setTable = db.transaction(dbTableName,'readwrite');//设置表权限
 94     fun.elem('codeId').innerHTML += '设置表权限<br />';
 95     
 96     var getTable = setTable.objectStore(dbTableName);//获取表对象
 97     fun.elem('codeId').innerHTML += '获取表对象<br />';
 98     
 99     var update = getTable.put({content : con.content, id : key});
100     update.onsuccess = function(){
101         showTb();
102         fun.elem('codeId').innerHTML += "修改key:"+key+"内容成功<br />";
103     }
104 }
105 
106 function deleteCon(key){//删除
107     var setTable = db.transaction(dbTableName,'readwrite');//设置表权限
108     fun.elem('codeId').innerHTML += '设置表权限<br />';
109     
110     var getTable = setTable.objectStore(dbTableName);//获取表对象
111     fun.elem('codeId').innerHTML += '获取表对象<br />';
112     
113     var dlt = getTable.delete(key);
114     dlt.onsuccess = function(){
115         showTb();
116         fun.elem('codeId').innerHTML += "删除key:"+key+"内容成功<br />";
117     }
118 }
119 
120 
121 //------------------------------------------------btn-------------------------------------------
122 fun.elem('openDbId').onclick = function(){//request indexedDb btn
123     if('indexedDB' in window){
124         request = indexedDB.open(dbName,version);
125         openDbs();
126     }else{
127         alert('当前浏览器不支持indexedDB!');
128     }
129 }
130 
131 fun.elem('ddId').onclick = function(){//delete database btn
132     fun.value('codeId','','set');
133     fun.display('dbConId','none');
134     deleteDb();
135     close();
136 }
137 
138 fun.elem('closeId').onclick = function(){//close database btn
139     fun.value('codeId','','set');
140     fun.display('dbConId','none');
141     close();
142 }
143 
144 fun.elem('tbId').onclick = function(){//tables btn
145     showTb();
146 }
147 
148 fun.elem('aitId').onclick = function(){//add content in table btn
149     if(fun.elem('consTxtId').style.display == 'block'){
150         conCls = '';
151         fun.display('consTxtId','none');
152         fun.value('conMsgId','','set');
153     }else{
154         conCls = 'add';
155         fun.value('conMsgId','添加 : ','set');
156         fun.display('consTxtId','block');
157     }
158 }
159 
160 fun.elem('confirmAddId').onclick = function(){//confirm btn
161     if(fun.elem('conId').value == ''){
162         alert('内容为空');
163     }else{
164         var con = {content : fun.elem('conId').value};
165         if(conCls != undefined){
166             if(conCls == "add"){
167                 addCon(con);
168             }
169             if(conCls == "update"){
170                 if(updateKey != undefined){
171                     updateCon(updateKey,con);
172                 }
173             }
174             fun.display('consTxtId','none');
175             fun.elem('conId').value = '';
176         }
177     }
178 }
179 
180 //content  btn
181 function conUpdate(key){//修改 btn
182     conCls = 'update';
183     updateKey = key;
184     fun.value('conMsgId','修改 : ','set');
185     fun.display('consTxtId','block');
186 }
187 function conDelete(key){//删除 btn
188     deleteCon(key);
189 }
190 </script>
原文地址:https://www.cnblogs.com/weihexinCode/p/12317444.html