前端缓存有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('数据删除成功');  
    };  
}