數(shù)據(jù)持久化及數(shù)據(jù)更新緩存
常用的8種緩存機制:HTTP緩存, locationStorage, Session Storage, Clear storage, Local Storage, indexDB, Web SQL, Cookies, CacheStorage, Application Cache.
LocalStroage :HTML5
不同瀏覽器中l(wèi)ocalStroage有長度限制且各不相同(IE8:5MB;firefox8:5.24MB;Opera:2MB;Chrome,Safari:2.6MB)
核心API:
+設(shè)置儲存記錄: localStorage.setItem()
+獲取存儲記錄: localStorage.getItem()
+刪除: localStroage.removeItem()
+刪除全部: localStroage.clear()
SessionStorage:
+可以說sessinonstroage為臨時儲存器,與localStroge功能類似,但是在瀏覽器關(guān)閉之后數(shù)據(jù)會被清空.
+sessionstroage與localStroag的API 相同
cookie :
1.cookie指網(wǎng)站為了辨別用于身份或session跟蹤而生成的儲存
2.cookie儲存小型數(shù)據(jù),通常認(rèn)為cookie的最大長度限制為4kb(4095b~4097b)
+設(shè)置(js可以使用document.cookie屬性來創(chuàng)建,讀取,及刪除cookie)
+document.cookie = 'key=value'
//讀取或獲取是通過點語法來獲取
+console.log(docunment.cookie.username);
為cookie添加一個結(jié)束時間(可以用GMT或是UTC)
+docunment.cookie="key=value; key=value; key=value; expires=Tues, 31 Oct 2017 12:00:00 GMT"
+刪除? ? 由于可以設(shè)置過期時間,如果要刪除的話,可以將過期時間設(shè)置成以前的時間
Application Cache
是一種通過mainfest配置文件在本地有選擇性的儲存js,css,圖片等靜態(tài)資源等待文件等待文件緩存機制
//mainfest 是HTML下的屬性,形式為 <html mainfest='index.appcache'>
格式為
CACHE MANIFEST
#version 1.9
CACHE:
index.html
code.js
本地緩存
NETWORK
style.css
網(wǎng)上緩存
Application Cache 優(yōu)勢:
+離線瀏覽
+快速加載
+服務(wù)器負(fù)載小
盡管Application Cache的實現(xiàn)方便, 但是Application Cache 已經(jīng)開始被標(biāo)準(zhǔn)棄用, 漸漸將會由ServiceWorkers來代替,所以現(xiàn)在不建議使用Application Cache來實現(xiàn)離線應(yīng)用
WebSQL, indexDB
WebSQL是瀏覽器用于儲存較大量數(shù)據(jù)的緩存機制;需要使用數(shù)據(jù)庫知識:
創(chuàng)建數(shù)據(jù)庫 CREATE DATABASE? 數(shù)據(jù)庫名
刪除數(shù)據(jù)庫 DROP DATABASE 數(shù)據(jù)庫名
創(chuàng)建新表 CREATE TABLE 表名(條件)
刪除新表 DROP TABLE 表名
幾個基本的sql語句
+選擇 select * from 要操作的表格名 where 范圍
+插入 insert into 要操作的表格名
+刪除 delete from 要操作的表格名 where 范圍
+更新 update 要操作的表格名set field1=value1 where 范圍
WebSQL不是HTML5規(guī)范
IndexDB: 也是一個可在客戶端存儲大量結(jié)構(gòu)化數(shù)據(jù)數(shù)據(jù)庫
WebSQL, indexDB實際應(yīng)用場景不是很多, 而且將大量數(shù)據(jù)存儲保存在本地也會造成數(shù)據(jù)泄露, 了解即可, 無需在實際項目使用
WebSQL三個核心API: openDatabase(); 創(chuàng)建transaction();執(zhí)行 executeSql()刪除
var db = openDatabase('testDB', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (context) {
context.executeSql('CREATE TABLE IF NOT EXISTS testTable (id unique, name)');
context.executeSql('INSERT INTO testTable (id, name) VALUES (0, "Byron")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (1, "Casper")');
context.executeSql('INSERT INTO testTable (id, name) VALUES (2, "Frank")');
});
