前端缓存有cookie,localStorage,sessionStorage,webSQL,indexDB；
cookie:有缺点
localStorage:功能单一
sessionStorage:会话级
webSQL:仅谷歌支持(标准查询语句)
重点-------------------indexDB
IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。
数据相关操作直接上代码：
/*web SQL 只有谷歌支持 几乎不用*/
/*var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique ,log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (2, "www.runoob.com")');
});
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx,result) {
var len = result.rows.length, i;
for (i = 0; i < len; i++) {
console.log(result.rows.item(i).log);
}
}, null);
});*/
/**
* IndexedDB
* */
var db;/*数据库对象*/
var objectStore;/*仓库(表)*/
/**
* 创建数据库
*/
var request = window.indexedDB.open('myIndex', 3);/*该域中的数据库myIndex*/
request.onerror = function (event) {
console.log('open database error');
};
/**
* 业务代码
*/
request.onsuccess = function (event) {
db = request.result;/*数据库对象*/
// add();
// read();
// update();
// remove();
readAll();
// console.log(db);
};
/**
* 创建表
*/
request.onupgradeneeded = function (event) {
db = event.target.result;/*数据库对象*/
if (!db.objectStoreNames.contains('person')){
objectStore = db.createObjectStore('person',{keyPath:'id'});/*创建person仓库(表) 主键*/
// objectStore = db.createObjectStore('person',{autoIncrement:true});/*自动创建主键*/
objectStore.createIndex('name', 'name', {unique:false});
objectStore.createIndex('email', 'email', {unique:true});
}
console.log(db);
};
/**
* 插入数据
*/
function add() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.add({ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' });
request.onsuccess = function (event) {
console.log('数据写入成功');
};
request.onerror = function (event) {
console.log('数据写入失败');
};
}
/**
* 读取数据
*/
function read() {
var transaction = db.transaction(['person']);
var objectStore = transaction.objectStore('person');
var request = objectStore.get(1);
request.onerror = function (event) {
console.log('事物失败');
};
request.onsuccess = function (event) {
if (request.result) {
console.log('Name' + request.result.name);
console.log('Age' + request.result.age);
console.log('Email' + request.result.email);
}else{
console.log('未获得数据记录');
}
};
} /**
* 遍历数据
*/
function readAll() {
var objectStore = db.transaction(['person']).objectStore('person');
objectStore.openCursor().onsuccess = function (event) {
var cursor = event.target.result;
if (cursor){
console.log('Id:' + cursor.key);
console.log('Name:' + cursor.value.name);
console.log('Age:' + cursor.value.age);
console.log('Email:' + cursor.value.email);
} else {
console.log('没有更多数据了');
}
}
} /**
* 更新数据
*/
function update() {
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.put({ id: 1, name: '李四', age: 35, email: 'lisi@example.com' });
request.onsuccess = function (event) {
console.log('数据更新成功');
};
request.onerror = function (event) {
console.log('数据更新失败');
};
} /**
* 删除数据
*/
function remove()
{
var request = db.transaction(['person'], 'readwrite')
.objectStore('person')
.delete(1);
request.onsuccess = function (event) {
console.log('数据删除成功');
};
}
