html5快取方式總結

2021-10-03 06:31:26 字數 849 閱讀 6166

在html5出來之前,通常在瀏覽器中使用cookie來儲存使用者的資料

cookie在每次http請求頭中會帶上乙個識別符號傳送給伺服器,

讓伺服器區分請求是否來自同乙個伺服器,

cookie只能儲存4k左右的資料,也就是說不能儲存大資料;

通過建立cache manifest檔案對web應用的靜態檔案進行快取讓web應用在沒有網路的情況下也能正常訪問頁面

提公升頁面載入速度

降低伺服器壓力

進行離線快取

使用方式:通過在服務端進維護manifest格式快取檔案清單,同時在html頁面檔案中html標籤中進行設定即可;

快取檔案manifest書寫格式如下:

cache manifest #宣告快取檔案

#1.0 #新增快取檔案的版本號,可以用來更新快取檔案

cache: #需要快取的檔案

./css/reset.css

network: #不需要快取的檔案,一般設定【*】即可

./css/style.css

fallback: #當頁面無法正常訪問的時候所顯示的頁面,如404頁面

4.jpg 404.jpg#4.jpg #代表需要替換的檔案,404.jpg表示被替換的檔案

建立好manifest檔案後,還需要將該檔案在伺服器上進行正確的配置;mime-type(text/cache-manifest)。

由於該快取由於快取容量有限,建議將公眾檔案進行快取,或者每個頁面都維護乙個manifest檔案來進行快取;

瀏覽器第一次請求時會判斷是否存在manifest檔案,根據manifest檔案中的快取清單將需要的快取在本地;

HTML5儲存方式總結

html5之前,主要使用cookies儲存。cookie實際上是一小段的文字資訊。客戶端請求伺服器,如果伺服器需要記錄該使用者狀態,就向客戶端瀏覽器頒發乙個cookie。客戶端瀏覽器會把cookie儲存起來。當瀏覽器再請求該 時,瀏覽器把請求的 連同該cookie一同提交給伺服器。伺服器檢查該coo...

HTML5 應用快取

html5 引入了應用程式快取,這意味著 web 應用可進行快取,並可在沒有網際網路連線時進行訪問。應用程式快取為應用帶來三個優勢 新增快取 manifest 檔案可分為三個部分 network 在此標題下列出的檔案需要與伺服器的連線,且不會被快取 fallback 在此標題下列出的檔案規定當頁面無...

HTML5離線快取

它的優勢在於 ie10以下不支援,其餘的瀏覽器都支援。補充瀏覽器及其核心 ie trident ff gecko chrome blink opera blink 曾經使用presto safari webkit timepara getdatetime 獲取日期和時間 logo.png width...