關於前端儲存 indexedDB
在寫手機端的時候經常會遇到一些奇葩的要求，比如客戶端禁止了cookies，前端快取還生效嗎？
之前在公司是用cookies localstorage sessionstorage測試過，禁止cookies是行不通的，今天再測試indexedDB，還是行不通的。
答案是大寫的：NO
那麼就用全域性變數存吧，全域性變數存在的問題就是重新整理瀏覽器變數會還原初始設定。
下面貼上indexedDB的程式碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="author" content="sina_mobile">
<meta name="format-detection" content="telephone=no" />
<title></title>
</head>
<body>
<script>
var INDEXDB = {
indexedDB:window.indexedDB||window.webkitindexedDB,
IDBKeyRange:window.IDBKeyRange || window.webkitIDBKeyRange,//鍵範圍
openDB:function(dbname,dbversion,callback){
//建立或開啟資料庫，建立物件儲存空間(ObjectStore)
var self = this;
var version = dbversion || 1;
var request = self.indexedDB.open(dbname,version);
request.onerror = function(e){
console.log(e.currentTarget.error.message);
};
request.onsuccess = function(e){
myDB.db = e.target.result;
console.log('成功建立並開啟資料庫:'+myDB.name+' version'+dbversion);
};
request.onupgradeneeded=function(e){
var db=e.target.result,transaction= e.target.transaction,store;
if(!db.objectStoreNames.contains(myDB.ojstore.name)){
//沒有該物件空間時建立該物件空間
store = db.createObjectStore(myDB.ojstore.name,{keyPath:myDB.ojstore.keypath});
console.log('成功建立物件儲存空間：'+myDB.ojstore.name);
}
}
},
deletedb:function(dbname){
//刪除資料庫
var self = this;
self.indexedDB.deleteDatabase(dbname);
console.log(dbname+'資料庫已刪除')
},
closeDB:function(db){
//關閉資料庫
db.close();
console.log('資料庫已關閉')
},
addData:function(db,storename,data){
//新增資料，重複新增會報錯
console.log(db + ' 新增資料，重複新增會報錯')
var store = store = db.transaction(storename,'readwrite').objectStore(storename),request;
for(var i = 0 ; i < data.length;i++){
request = store.add(data[i]);
request.onerror = function(){
console.error('add新增資料庫中已有該資料')
};
request.onsuccess = function(){
console.log('add新增資料已存入資料庫')
};
}
},
putData:function(db,storename,data){
//新增資料，重複新增會更新原有資料
var store = store = db.transaction(storename,'readwrite').objectStore(storename),request;
for(var i = 0 ; i < data.length;i++){
request = store.put(data[i]);
request.onerror = function(){
console.error('put新增資料庫中已有該資料')
};
request.onsuccess = function(){
console.log('put新增資料已存入資料庫')
};
}
},
getDataByKey:function(db,storename,key){
//根據儲存空間的鍵找到對應資料
var store = db.transaction(storename,'readwrite').objectStore(storename);
var request = store.get(key);
request.onerror = function(){
console.error('getDataByKey error');
};
request.onsuccess = function(e){
var result = e.target.result;
console.log('查詢資料成功')
console.log(result);
};
},
deleteData:function(db,storename,key){
//刪除某一條記錄
var store = store = db.transaction(storename,'readwrite').objectStore(storename);
store.delete(key)
console.log('已刪除儲存空間'+storename+'中'+key+'記錄');
},
clearData:function(db,storename){
//刪除儲存空間全部記錄
var store = db.transaction(storename,'readwrite').objectStore(storename);
store.clear();
console.log('已刪除儲存空間'+storename+'全部記錄');
}
}
var students=[{
id:1001,
name:"Byron",
age:24
},{
id:1002,
name:"Frank",
age:30
},{
id:1003,
name:"Aaron",
age:26
}];
var myDB={
name:'uni',
version:1,
db:null,
ojstore:{
name:'students',//儲存空間表的名字
keypath:'id'//主鍵
}
};
INDEXDB.openDB(myDB.name,myDB.version);
setTimeout(function(){
console.log('****************新增資料****************************');
INDEXDB.addData(myDB.db,myDB.ojstore.name,students);
// console.log('******************add重複新增**************************');
// INDEXDB.addData(myDB.db,myDB.ojstore.name,students);
// console.log('*******************put重複新增*************************');
// INDEXDB.putData(myDB.db,myDB.ojstore.name,students);
// console.log('*******************獲取資料1001*************************');
// INDEXDB.getDataByKey(myDB.db,myDB.ojstore.name,1001);
// console.log('******************刪除資料1001************');
// INDEXDB.deleteData(myDB.db,myDB.ojstore.name,1001);
// console.log('******************刪除全部資料************');
// INDEXDB.clearData(myDB.db,myDB.ojstore.name);
// console.log('******************關閉資料庫************');
// INDEXDB.closeDB(myDB.db);
// console.log('******************刪除資料庫************');
// INDEXDB.deletedb(myDB.name);
},800)
</script>
</body>
</html>