HTML5儲存方式

cookies的野蠻生長

本地儲存localstorage

本地儲存sessionstorage

web sql

indexeddb

在html5出現之前，cookies便佔據了客戶端儲存的整個江山，就像是蠻荒時代的野蠻生長，cookies很好、快速地滿足實際應用的需求。但是它的問題也很明顯，cookies會在請求頭上帶著資料，而且大小限制在4k以內，這是非常不安全的，容易被外部擷取，還存在domain汙染。

ie瀏覽器特別喜歡搞自己的一套，對於增加儲存容量加入了userdata，大小是64k，但是其他瀏覽器不喜歡跟它玩，也就只有它自己一家支援。

那麼，重點來了。既然cookies問題那麼多，就要想辦法解決，不然沒法繼續往前發展。首先要確認它的問題有哪些，然後根據這些問題尋找解決方案。

儲存方式

以鍵值對（key-value）的方式儲存，永久儲存，永不失效，除非手動刪除。

儲存容量

每個網域名稱5m。

常用的api

getitem//取記錄

setitem//設定記錄

removeitem//移除記錄

key//取key所對應的值

clear//清除記錄

html5的本地儲存api中的localstorage與sessionstorage在使用方法上是相同的，區別在於sessionstorage在關閉頁面後即被清空，而localstorage則會一直儲存，除非手動刪除。

本地快取應用所需的檔案

使用方法

1、配置manifest檔案

頁面上：

manifest檔案：

manifest是最簡單的文字檔案，它告知瀏覽器被快取的內容（以及不快取的內容）。

manifest檔案分為三個部分：

network-在此標題下的檔案需要與伺服器進行連線，且不會被快取

fallback-在此標題下的檔案規定當頁面無法被訪問時的回退頁面（比如404頁面）

完整demo

cache manifest # 2016-07-24 v1.0.0 /theme.css /main.js network: login.jsp fallback:

/html/ /offline.html

伺服器上：manifest檔案需要配置正確的mime-type，即text/cache-manifest。

常用api

1 （idle）：閒置，應用快取沒有得到更新

5 （idle）：廢棄，應用快取的描述檔案已經不存在了，因此頁面無法再訪問應用快取

相關事件

表示應用快取狀態的改變：

checking：在瀏覽器為應用快取查詢更新時觸發

noupdate：在檢查描述檔案發現檔案無變化時觸發

cached：在應用快取完整可用時觸發

離線瀏覽

提公升頁面載入速度

降低伺服器壓力

注意事項：

瀏覽器對快取資料的容量限制可能不太一樣（某些瀏覽器設定的限制是每個站點5m）

引用manifest的html必須與manifest檔案同源，在同乙個域下

瀏覽器會自動快取引用manifest檔案的html檔案，這就導致了如果更改了html內容，也需要更新版本才能做到最新

manifest檔案中的cache與network、fallback的位置順序沒有關係，如果是隱式宣告需要在最前面

fallback中的資源必須和manifest檔案同源

更新完版本後，必須重新整理一次才會啟動新版本（會出現重刷一次頁面的情況），需要新增監聽版本事件

站點中的其他頁面即使沒有設定manifest屬性，請求的資源如果在快取中也從快取中訪問

當manifest檔案發生改變時，資源請求本身也會觸發更新

離線快取和傳統瀏覽器快取的區別

離線快取是針對整個應用，瀏覽器快取是單個檔案

離線快取可以主動通知瀏覽器更新資源

web sql資料庫api並不是html5規範的一部分，但它是乙個獨立的規範，引入了一組使用sql操作客戶端資料庫的apis。

核心方法

opendatabase：使用現有的資料庫或新建的資料庫建立乙個資料庫物件

transaction：控制乙個事務，以及基於這種情況執行提交或回滾

executesql：用於執行實際的sql查詢

開啟資料庫

var db = opendatabase('mydb', '1.0', 'test db', 2 * 1024 * 1024, fn);

執行查詢操作

var db = opendatabase('mydb', '1.0', 'test db', 2 * 1024 * 1024);
db.transaction(function (tx) )

插入資料

注：部落格主題裡的**塊樣式

var db = opendatabase('mydb', '1.0', 'test db', 2 * 1024 * 1024);
db.transaction(function (tx) );

注：需要實現的**塊樣式，這個是 markdowpad2 裡的操作，也是很多markdown寫作工具提供的操作，只需要按一下 tab 鍵，非常方便

var db = opendatabase('mydb', '1.0', 'test db', 2 * 1024 * 1024);
db.transaction(function (tx) );

讀取資料

db.transaction(function (tx) 
}, null);
});

非同步api

在indexeddb大部分操作並不是我們常用的呼叫方法（返回結果的模式），而是（請求-響應模式），比如開啟資料庫的操作

本文**於:猿2048→

HTML5儲存方式

HTML5儲存方式總結

html5中web儲存方式

HTML5儲存系統

HTML5儲存方式

HTML5儲存方式總結

html5中web儲存方式

HTML5儲存系統

相關推薦