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>