web存储 之 indexedDB
缓存机制概述
浏览器缓存(Browser Caching)是浏览器端保存数据用于快速读取或避免重复资源请求的优化机制,有效的缓存使用可以避免重复的网络请求和浏览器快速地读取本地数据,整体上加速网页展示给用户。
常见的缓存方法有: http缓存、cookie、LocalStorage、SessionStorage
新兴缓存方法:cacheStorage、indexedDB
WebSQL VS IndexedDB
# | 兼容性 | 特点 | 备注 |
---|---|---|---|
WebSQL | 仅chrome ,safari等浏览器支持 | 关系型数据库 | API 不包含在 HTML5 规范之中 |
IndexedDB | 逐渐支持 | NoSQL数据库 |
IndexedDB 的基本使用
判断浏览器是否支持 IndexedDB
1
2
3
4
5
6
7
8
9
10
11
12// 定义一个命名空间
var store = {};
store.isSupport = function() {
window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
if (!window.indexedDB) {
console.log('你的浏览器不支持IndexedDB');
return false;
} else {
console.log('你的浏览器支持IndexedDB');
return true;
}
}
打开/创建/更新 本地数据库
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26// 打开IndexedDB数据库
store.open = function(name, version, storeName) {
// 第一个参数是数据库的名称 第二个参数是数据库的版本号
var request = window.indexedDB.open(name, version);
request.onerror = function(event) {
console.log('打开IndexedDB失败', event);
};
// onupgradeneeded事件在 第一次打开页面初始化数据库 或 当有版本号变化 时 会被调用
request.onupgradeneeded = function(event) {
console.log('upgrading');
myDB.db = event.target.result;
if (!myDB.db.objectStoreNames.contains(storeName)) {
// keyPath 对象唯一的属性作为键值
myDB.db.createObjectStore(storeName, { keyPath: 'id' });
//myDB.db.createObjectStore(storeName,{autoIncrement: true}); //keyGenerate 任意值为键值
} else {
//销毁数据库
// db.deleteObjectStore(storeName);
}
console.log('IndexedDB version changed to name: '+name +' version: '+version);
};
request.onsuccess = function(event) {
console.log('成功打开IndexedDB');
myDB.db = event.target.result;
}
}
新增一个对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14// 新增一个对象
store.addData = function(da, storeName, obj) {
var transaction = db.transaction(storeName, 'readwrite');
transaction.oncomplete = function(event) {
console.log('Add Success');
};
transaction.onerror = function(event) {
console.log('Add Error');
};
var _store = transaction.objectStore(storeName);
for(var i=0; i<obj.length; i++) {
_store.add(obj[i]);
}
}根据键值删除一个对象
1
2
3
4
5
6
7
8
9
10
11// 删除一个对象
store.delete = function() {
var transaction = db.transaction(storeName, 'readwrite');
transaction.objectStore(storeName).delete(value);
transaction.oncomplete = function(event) {
console.log('Delete Success');
}
transaction.onerror = function(error) {
console.log('Delete Error');
}
}删除该数据库所有内容
1
2
3
4
5
6
7
8
9
10
11
12
13store.clear = function(db, storeName){
var transaction = db.transaction(storeName, 'readwrite');
var _store = transaction.objectStore(storeName);
transaction.oncomplete = function(event) {
console.log('Clear Success');
};
transaction.onerror = function(event) {
console.log('Clear Error');
};
_store.clear();
}根据键值获取对象
1
2
3
4
5
6
7
8
9
10
11
12
13// 根据键值获取对象
store.getByKey = function(db, storeName, key) {
var transaction = db.transaction(storeName, 'readwrite');
var _store = transaction.objectStore(storeName);
var request = _store.get(key);
request.onsuccess = function(event) {
console.log(request.result)
return request.result
};
request.onerror = function(event) {
console.log('获取失败')
};
}根据键值更新对象
1
2
3
4
5
6
7
8
9// 根据键值更新对象
store.updateByKey = function(db, storeName, obj) {
var transaction = db.transaction(storeName, 'readwrite');
var _store = transaction.objectStore(storeName);
var request = _store.get(obj.id);
request.onsuccess = function(e) {
_store.pu(obj)
}
}删除数据库
1
2
3
4store.deleteDB = function(db) {
console.log('删除数据库')
window.indexedDB.deleteDatabase(db)
}运行实践
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22//定义数据库版本
var myDB = {
name : 'mytestDatabas',
version: 1.0,
db: 'mytestDatabas',
storeName: 'students'
};
const customerData = [
{ id: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
{ id: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
];
if(store.isSupport()) {
store.open(myDB.name, 1, myDB.storeName);
// 异步操作
setTimeout(function() {
store.addData(myDB.db, myDB.storeName, customerData);
store.getByKey(myDB.db, myDB.storeName, "444-44-4444")
store.delete(myDB.db, myDB.storeName, "444-44-4444")
store.updateByKey(myDB.db, myDB.storeName, { id: "444-44-4444", name: "Bill", age: 80, email: "bill@company.com" })
store.clear(myDB.db, myDB.storeName)
},500);
}