JavaScript中離線應用和客戶端存儲（cookies、sessionStorage、localStorage）
一、離線應用
所謂離線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")); //xiaolu alert(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對象
sessionStorage對象存儲特定於某個會話的數據，也就是該數據只保持到瀏覽器關閉。
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）