JavaScript中離線應用和用戶端儲存（cookies、sessionStorage、localStorage）

標籤：定義   cal   儲存資料   瀏覽器安全色性   緩衝   web   pre   get   setcookie   

一、離線應用

所謂離線web應用，就是在裝置不能上網的情況下仍然可以啟動並執行應用。

開發離線web應用需要幾個步驟：首先，確保應用知道裝置是否能上網，以便下一步執行正確的操作；然後，應用還必須能訪問一定的資源（映像、JavaScript、css等），只有這樣才能正常工作；最後，必須有一塊本地空間用於儲存資料，無論能否上網都不妨礙讀寫。

1、離線檢測

HTML5定義一個navigator.onLine屬性，這個屬性值為true表示裝置能上網，值為false表示裝置離線。

除了navigator.onLine屬性之外，HTML5還定義了兩個事件：online和offline。當網路從離線變為線上或者從線上變為離線時，分別觸發這兩個事件。

為了檢測應用是否離線，在頁面載入後，最好先通過navigator.onLine取得初始的狀態。然後，就是通過上述兩個事件來確定網路連接狀態是否變化。當上述事件觸發時，navigator.onLine屬性的值也會改變，不過必須手工輪詢這個屬性才能檢測到網路狀態的變化。

2、應用緩衝

HTML5的應用緩衝，或者簡稱為appcache，是專門為開發離線Web應用而設計的。Appcache就是從瀏覽器的緩衝中分出來的一塊緩衝區。

二、資料存放區1、cookie

是在用戶端用於儲存會話資訊的。該標準要求伺服器對任意http請求發送Set-Cookie Http頭作為回應標頭的一部分，其中包括會話資訊。

（1）限制

cookie在性質上是綁定在特定的網域名稱下的。當設定了一個cookie後，再建立它的網域名稱發送請求時，都會包含這個cookie。

由於cookie是存在用戶端電腦上的，還加入了一些限制確保cookie不會被惡意使用，同時不會佔用太多磁碟空間。

1、IE6以及更低版本限制每個網域名稱最多20個cookie

2、IE7和之後版本每個網域名稱最多50個。

3、Firefox限制每個域最多50個cookie。

4、Opera限制每個域最多30個cookie。

5、Safari和Chrome對於每個域的cookie數量限制沒有硬性規定。

瀏覽器中對於cookie的尺寸也有限制。大多數瀏覽器都有大約4096B（加減1）的長度限制。為了最佳的瀏覽器安全色性，最好將整個cookie長度限制在4095B（含4095）

以內。

2、IE使用者資料

在IE5.0中，微軟通過一個自訂行為引入了持久化使用者資料的概念。使用者資料允許每個文檔最多128KB資料，每個網域名稱最多1MB資料。

<div style="behavior:url(#default#userData)" id="dataStore"></div>var dataStore = document.getElementById("dataStore");dataStore.setAttribute("name","xiaolu");dataStore.setAttribute("book","javaScript");dataStore.save("BookInfo");在這段代碼中，<div>元素上存入了兩部分資訊。在用setAttribute()儲存資料之後，調用了save()方法，指定了資料空間的名稱為BookInfo。下一次頁面載入之後，可以使用load()方法指定同樣的資料空間名稱來擷取資料；dataStore.load("BookInfo");alert(dataStore.getAttribute("name"));  //xiaolualert(dataStore.getAttribute("book"));   //javaScript

可以通過removeAttribute()方法明確指定要刪除某元素資料，只要指定屬性名稱。刪除之後，必須要再次調用save()來提交更改。

dataStore.removeAttribute("name","xiaolu");dataStore.removeAttribute("book","javaScript");dataStore.save("BookInfo");

對IE使用者資料的訪問限制和對cookie的限制類似。要訪問某個資料空間，指令碼啟動並執行頁面必須來自同一個網域名稱，在同一個路徑下，並使用與進行儲存的指令碼同樣的協議。

和cookie不同的是，你無法將使用者資料訪問限制擴充到更多的客戶。還有一點不同，使用者資料預設是可以跨越會話持久存在的，同時也不會到期；資料需要通過removeAttribute()方法專門進行刪除以釋放空間。

cookie和IE使用者資料並非安全，所以不能存放敏感資訊。

三、Web儲存機制1、sessionStorage對象

sessionStorageObject Storage Service特定於某個會話的資料，也就是該資料只保持到瀏覽器關閉。

2、localStorage對象

要訪問同一個localStorage對象，頁面必須來自同一個網域名稱（子網域名稱無效），使用同一種協議，在同一個連接埠上。資料保留到通過JavaScript刪除或者是使用者清除瀏覽器緩衝。

限制：對於localStorage而言，大多數案頭瀏覽器會設定每個來源5MB的限制，Chrome和Safari對每個來源的限制是2.5MB。而iOS版的Safari和Android版的webkit的限制也是2.5MB

對sessionStorage的賢惠也是因瀏覽器而異。有的瀏覽器對sessionStorage的大小沒有限制，但Chrome、Safari、iOS版Safari和Android版Webkit都有限制，也就是2.5MB。IE8+和Opera對sessionStorage的限制是5MB。

3.indexedDB

是在瀏覽器中儲存結構化資料的一種資料庫。最大特色是使用對象儲存資料，而不是使用表來儲存資料。

Web storage 和cookie的區別

Web Storage的概念和cookie相似，區別是它是為了更大型存放區設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了頻寬，另外cookie還需要指定範圍，不可以跨域調用。

除此之外，Web Storage擁有setItem，getItem，removeItem，clear等方法，不像cookie需要前端開發人員自己封裝setCookie，getCookie。

但是Cookie是不可或缺的Lcookie的作用是和伺服器進行互動，作為HTTP規範的一部分而存在，而Web Storage僅僅是為了在本地“儲存”資料而生。

瀏覽器的支援處理IE7及以下不支援外，其他標準瀏覽器都完全支援，值得一提的是，IE7、IE6中的userData其實就是JavaScript本機存放區的解決方案。通過簡單的代碼封裝可以統一到所有的瀏覽器都支援Web Storage

 

localStorage和sessionStorage都具有相同的操作方法，例如setItem，getItem，removeItem等。

 

JavaScript中離線應用和用戶端儲存（cookies、sessionStorage、localStorage）