h5的存儲方式有如下幾種
1、web storage
- 本地存儲local storage
- 本地存儲session storage
2、離線緩存（application cache）
3、Web SQL
4、IndexedDB
1、web storage
存儲形式：key-->value
存儲內(nèi)容：數(shù)組、json、圖片、腳本、樣式等可以序列化為字符串的內(nèi)容
使用場景：利用本地?cái)?shù)據(jù)，減少網(wǎng)絡(luò)傳輸，弱網(wǎng)高延遲低帶寬，盡量數(shù)據(jù)本地化
大小限制：每個(gè)域名5M
** 本地存儲local storage - 沒有時(shí)間限制的數(shù)據(jù)存儲 **
域內(nèi)安全、永久保存，除非手動刪除
if(typeof(Storage) !== "undefined") {
// localStorage.setItem(鍵名，鍵值) 存儲數(shù)據(jù)信息到本地
// localStorage.getItem(鍵名) 讀取本地存儲的信息
// localStorage.removeItem(鍵名) 刪除本地存儲的信息
// localStorage.clear() 清空所有存儲的信息
var value = "張三";
//存儲
localStorage.setItem("key", value);
//取值
var name = localStorage.getItem("key");
console.log(name);
//刪除
localStorage.removeItem("key");
//清空localStorage信息
localStorage.clear()
} else {
console.log("瀏覽器不支持web Storage")
}
** 本地存儲session storage - 針對一個(gè) session 的數(shù)據(jù)存儲 **
短期保存，重啟瀏覽器、關(guān)閉頁面或新開頁面時(shí)失效
if(typeof(Storage) !== "undefined") {
//sessionStorage.setItem(鍵名，鍵值) 存儲數(shù)據(jù)信息到本地
//sessionStorage.getItem(鍵名) 讀取本地存儲的信息
//sessionStorage.removeItem(鍵名) 刪除本地存儲的信息
//sessionStorage.clear () 清空所有存儲的信息
var value = "張三";
//存儲
se.setItem("key", value);
//取值
var name = localStorage.getItem("key");
console.log(name);
//刪除
localStorage.removeItem("key");
//清空localStorage信息
localStorage.clear()
} else {
console.log("瀏覽器不支持web Storage")
}
2、離線緩存（application cache）
使用 HTML5，通過創(chuàng)建 cache manifest 文件，可以輕松地創(chuàng)建 web 應(yīng)用的離線版本。
HTML5 引入了應(yīng)用程序緩存，這意味著 web 應(yīng)用可進(jìn)行緩存，并可在沒有因特網(wǎng)連接時(shí)進(jìn)行訪問。
應(yīng)用程序緩存為應(yīng)用帶來三個(gè)優(yōu)勢：
- 離線瀏覽 - 用戶可在應(yīng)用離線時(shí)使用它們
- 速度 - 已緩存資源加載得更快
- 減少服務(wù)器負(fù)載 - 瀏覽器將只從服務(wù)器下載更新過或更改過的資源。
所有主流瀏覽器均支持應(yīng)用程序緩存，除了 Internet Explorer。
未完待續(xù)...
請參考
http://www.w3school.com.cn/html5/html_5_app_cache.asp
3、Web SQL
Web SQL 數(shù)據(jù)庫可以在最新版的 Safari, Chrome 和 Opera 瀏覽器中工作
核心方法：
- openDatabase：這個(gè)方法使用現(xiàn)有的數(shù)據(jù)庫或者新建的數(shù)據(jù)庫創(chuàng)建一個(gè)數(shù)據(jù)庫對象。
- transaction：這個(gè)方法讓我們能夠控制一個(gè)事務(wù)，以及基于這種情況執(zhí)行提交或者回滾。
- executeSql：這個(gè)方法用于執(zhí)行實(shí)際的 SQL 查詢。
打開數(shù)據(jù)庫：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024,fn);
//openDatabase() 方法對應(yīng)的五個(gè)參數(shù)分別為：數(shù)據(jù)庫名稱、版本號、描述文本、數(shù)據(jù)庫大小、創(chuàng)建回調(diào)
執(zhí)行查詢操作：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
});
插入數(shù)據(jù)：
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS WIN (id unique, name)');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (1, "winty")');
tx.executeSql('INSERT INTO WIN (id, name) VALUES (2, "LuckyWinty")');
});
讀取數(shù)據(jù)：
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM WIN', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查詢記錄條數(shù): " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).name );
}
}, null);
});
具體代碼可參考我的另一篇關(guān)于數(shù)據(jù)庫文章
鏈接如下：
http://www.lxweimin.com/p/ba69532c0b00
4、IndexedDB
http://www.cnblogs.com/dolphinX/p/3415761.html
http://www.cnblogs.com/dolphinX/p/3416889.html
H5之前
主要使用cookies
數(shù)據(jù)大小：作為存儲容器，cookie的大小限制在4KB左右。
安全性問題：由于在HTTP請求中的cookie是明文傳遞，有安全性隱患。
網(wǎng)絡(luò)負(fù)擔(dān)：cookie會被附加在每個(gè)HTTP請求中，在HttpRequest 和HttpResponse的header中都是要被傳輸?shù)模詿o形中增加了一些不必要的流量損失。
兼容問題：
本地存儲是H5的新貴，但是對于老、舊的瀏覽器來說怎么辦？那就不用老古董瀏覽器唄，或者使用cookie作為替代。因?yàn)榇蠖嗍褂胠ocalStorage是用來存儲字符串的，在其他編譯型的語言看來，存儲字符串能做些什么，但在JavaScript身上，舊大放光彩，可以存儲JSON格式的字符串來擴(kuò)展應(yīng)用，可以存儲類名變量值等等信息再通過eval()來感受使用JS的快感。既然localStorage是存儲字符串的，那么在老古董瀏覽器上，可以通過使用Cookies來做替代方案并做好域內(nèi)安全。
