[js] indexeddb 使用demo
需要在服务器环境下运行才可正常存储。
在IOS手机上兼容性很差。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul id='bg' style="background: lightblue;"></ul>
</body>
<script>
var abradb = (function() {
var myDB = {
name: 'chat5',
version: 1,
db: null
};
var storeName = 'list';
function openDB() {
var version = myDB.version || 1;
var request = window.indexedDB.open(myDB.name, version);
request.onerror = function(e) {
console.log(e.currentTarget.error.message);
};
request.onsuccess = function(e) {
myDB.db = e.target.result;
};
request.onupgradeneeded = function(e) {
var db = e.target.result;
if (!db.objectStoreNames.contains(storeName)) {
db.createObjectStore(storeName, {
keyPath: 'chat_id'
});
}
// if (db.objectStoreNames.contains(storeName)) {
// db.deleteObjectStore(storeName);
// }
console.log('DB version changed to ' + version);
};
}
function closeDB() {
myDB.db.close();
}
function deleteDB() {
indexedDB.deleteDatabase(myDB.name);
}
function addData(data) {
var transaction = myDB.db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
store.add(data);
console.log(store);
}
function getDataByKey(key) {
var transaction = myDB.db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(key);
request.onsuccess = function(e) {
var rd = e.target.result;
console.log(rd);
};
}
function updateDataByKey(key, data) {
var transaction = myDB.db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
var request = store.get(key);
request.onsuccess = function(e) {
var rd = e.target.result;
rd.chat_list.push(data);
store.put(rd);
console.log(updatedata.transaction);
};
}
function deleteDataByKey(key) {
var transaction = myDB.db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
store.delete(key);
}
function clearObjectStore() {
var transaction = myDB.db.transaction(storeName, 'readwrite');
var store = transaction.objectStore(storeName);
store.clear();
}
function displayData() {
var transaction = myDB.db.transaction(storeName, "readonly");
var objectStore = transaction.objectStore(storeName);
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
console.log(cursor);
//console.log(cursor.value);
var list = document.getElementById("bg");
if (cursor) {
var listItem = document.createElement('li');
listItem.innerHTML = cursor.value.chat_id;
list.appendChild(listItem);
cursor.continue();
} else {
console.log('Entries all displayed.');
}
};
};
openDB();
return {
openDB: openDB,
closeDB: closeDB,
closeDB: closeDB,
deleteDB: deleteDB,
addData: addData,
getData: getDataByKey,
updateData: updateDataByKey,
deleteData: deleteDataByKey,
clearAllData: clearObjectStore,
displayData: displayData
}
})();
var chat = {
from_id: 123,
from_name: "abc",
from_avatar: "",
unread: "10",
chat_id: 10222,
chat_list: [{
id: 1001,
name: "Byron",
age: 24
}, {
id: 1002,
name: "Frank",
age: 30
}, {
id: 1003,
name: "Aaron",
age: 26
}]
};
var dd = [{
id: 1001,
name: "Byron",
age: 24
}, {
id: 1002,
name: "Frank",
age: 30
}, {
id: 1003,
name: "Aaron",
age: 26
}, {
id: 1003,
name: "Aaron",
age: 26
}];
var cc = {
id: 1003,
name: "Aaron",
age: 9999
}
setTimeout(function() {
//abradb.updateData(1024, cc);
abradb.addData(chat);
//abradb.getData(16);
//abradb.deleteData(1000);
//abradb.clearAllData();
abradb.displayData();
}, 1000);
</script>
</html>
