HTML5簡單入門系列（三）

時間 2019-12-09

標籤 html5 html 簡單入門系列欄目 HTML5 简体版

原文原文鏈接

前言

本篇介紹HTML5支持的Web存儲（Web Storage）和HTML 5 應用程序緩存。javascript

客戶端存儲數據介紹

HTML5 提供了兩種在客戶端存儲數據的新方法：css

localStorage - 沒有時間限制的數據存儲
sessionStorage - 針對一個 session 的數據存儲

sessionStorage存儲的數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。html

localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。html5

之前的客戶端存儲數據都是由cookie完成的，它存在問題是：Cookie的大小是受限的，而且每次請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬；另外cookie還須要指定做用域，不能夠跨域調用。可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在，而Web Storage僅僅是爲了在本地「存儲」數據而生。java

Web Storage存儲和訪問

localStorage 和 sessionStorage 擁有同樣的存取接口，下邊已sessionStorage爲例說明web

接口
    sessionStorage.getItem(key)          ---- 獲取指定key的本地存儲的值
    sessionStorage.setItem(key,value) ---- 將value存儲到key字段中
    sessionStorage.removeItem(key)    ---- 刪除指定ke的本地存儲的值
    sessionStorage.length                     ---- sessionStorage的項目數
    sessionStorage.clear()     ---- 清空sessionStorage的項目跨域

web Storage不但能夠用自身的setItem,getItem等方便存取，也能夠像普通對象同樣用點(.)操做符，及[]的方式進行數據存儲，像以下的代碼：瀏覽器

var storage = window.localStorage; 
storage.key1 = "hello"; 
storage["key2"] = "world";
console.log(storage.key1);
console.log(storage["key2"]);

sessionStorage和localStorage提供的key()和length能夠方便的實現存儲的數據遍歷，例以下面的代碼：緩存

var storage = window.localStorage; 
for (var i=0, len = storage.length; i  <  len; i++){
     var key = storage.key(i);
     var value = storage.getItem(key);
     console.log(key + "=" + value);
 }

示例

<!DOCTYPE HTML>
<html>
<body>

<script type="text/javascript">

if (localStorage.pagecount)
    {
    localStorage.pagecount=Number(localStorage.pagecount) +1;
    }
else
    {
    localStorage.pagecount=1;
    }
document.write("Visits: " + localStorage.pagecount + " time(s).");

</script> 

<p>刷新頁面會看到計數器在增加。</p>

<p>請關閉瀏覽器窗口，而後再試一次，計數器會繼續計數。</p>

</body>
</html>

View Code

該示例使用localStorage，實現頁面瀏覽次數計數的功能，沒刷新一次頁面便可完成一次計數，關閉標籤頁或瀏覽器以後從新打開，仍然能夠連續計數（只限當前機器，和asp.net的application對象是不一樣的，一個是客戶端存儲，一個服務端存儲）。該示例若將localStorage替換成sessionStorage則能夠統計某一個用戶在當前回話中訪問（刷新）頁面的次數（同源頁面是能夠共享sessionStorage的）。服務器

HTML 5 應用程序緩存介紹

使用 HTML5，經過建立 cache manifest 文件，能夠輕鬆地建立 web 應用的離線版本。

HTML5 引入了應用程序緩存，這意味着 web 應用可進行緩存，並可在沒有因特網鏈接時進行訪問。

應用程序緩存爲應用帶來三個優點：

離線瀏覽 - 用戶可在應用離線時使用它們
速度 - 已緩存資源加載得更快
減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。

使用應用程序緩存

一、如需啓用應用程序緩存，請在文檔的 <html> 標籤中包含 manifest 屬性

二、manifest 文件須要配置正確的 MIME-type，即 "text/cache-manifest"。必須在 web 服務器上進行配置。

三、建立manifest文件（如manifestDemo.appcache），manifest 文件的建議的文件擴展名是：".appcache"。

Manifest 文件

manifest 文件是簡單的文本文件，它告知瀏覽器被緩存的內容（以及不緩存的內容）。對於瀏覽器來講，manifest的加載是要晚於其餘資源的，這就致使check manifest的過程是滯後的，發現manifest改變，全部瀏覽器的實現都是緊隨着作靜默更新資源，以保證下次瀏覽時應用到更新。另外引入manifest的頁面，即便沒有被列入緩存清單中，仍然會被用戶代理緩存。

CACHE MANIFEST
# VERSION 0.3

# 直接緩存的文件
CACHE:
/theme.css
/logo.gif
/main.js
# 在線連接的文件
NETWORK:
login.asp
# 替代方案
FALLBACK:
/html5/ /404.html

manifest 文件可分爲三個部分：

CACHE - 在此標題下列出的文件將在首次下載後進行緩存
NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）

manifest文件中第一行 CACHE MANIFEST是必須的。

CACHE 下定義的資源在網絡斷開的狀況下仍然可用。資源列表必須是一行對應一個資源。

而NETWORK下定義的則須要聯網訪問。在定義了CACHE以後，可使用'*'號定義NETWORK，即排除顯式定義的緩存列表外其餘資源都不緩存。

FALLBACK則是一種替代方案，前邊的路徑（文件夾或者路徑）訪問失敗時使用後邊的替補頁展現。

重要的提示：以 "#" 開頭的是註釋行，但也可知足其餘用途。應用的緩存會在其 manifest 文件更改時被更新。若是您編輯了一幅圖片，或者修改了一個 JavaScript 函數，這些改變都不會被從新緩存。更新註釋行中的日期和版本號是一種使瀏覽器從新緩存文件的辦法。

更新緩存

一旦應用被緩存，它就會保持緩存直到發生下列狀況：

用戶清空瀏覽器緩存
manifest 文件被修改（參閱下面的提示）
由程序來更新應用緩存

LZ在查看這節內容時，搜索到其餘不少manifest的相關內容和存在問題，將鏈接放在這裏供園友查看。

慎用manifest

HTML5離線篇

小結

關於HTML5客戶端存儲的知識相對要簡要一些。緩存相關內容，LZ僅僅是在w3school上運行了一下範例，網上搜集了一些其餘相關信息，由於缺少離線環境，本身沒有動手實踐。好吧，寫這麼一點東西居然用了兩個半小時。。。今天就到這裏吧。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。