本地儲存和離線快取
前端的儲存方式有：localStorage、sessionStorage、cookie、UserData、webSQL、indexeddb、HTML5離線儲存等
1、本地儲存
1.cookie
在h5之前，儲存主要用的是cookie。cookie會隨著每次http請求頭資訊一起傳送，無形中增加了網路流量，另外，cookie能儲存的資料容量有限，根據瀏覽器型別不同而不同，IE6大約只能儲存2K。
1）cookie的存取方法
- 1.存:賦值（鍵值對）
document.cookie = "鍵=值"; //一次只能存一個鍵值對
- 2.取：不賦值
var v=document.cookie; //
取出字串 常用操作： var arr1 = v.split("; ");//分割 JSON.stringify(obj); //物件轉換為字串存入 JSON.parse(str); //JSON字串轉換為物件取出
- 3.刪：（設定儲存有效時長為過去時間）
var date = new Date(); date.setDate(date.getDate()+"設定時長"); document.cookie = "key=value;expires="+date.toUTCString();
2）cookie的優缺點
- 優點：
- 可控制過期時間，使其不會長期有效
- 可擴充套件、可用性比較好
- 可加密減少cookie被破解的可能性
- 缺點：
- 數量和長度有限制，最多20條，最長不能超過40k
- 在請求頭上帶著資料安全性差
3）cookie的應用場景：主要應用：購物車、客戶端登入
2.localStorage
localStorage（本地儲存）,可以長期儲存資料，沒有時間限制，一天，一年，兩年甚至更長，資料都可以使用。
localStorage中一般瀏覽器支援的是5M大小，這個在不同的瀏覽器中localStorage會有所不同
1）使用方法
localStorage.setItem("key","value");//儲存 localStorage.getItems(key);//按key進行取值 localStorage.removeItems(key);//按key單個刪除 localStorage.clear();//刪除全部資料 localStorage.length;//獲得資料的數量 localStorage.valueOf();//獲取全部值
2）優缺點
- 優點：
localStorage拓展了cookie的4k限制
localStorage可以將第一次請求的5M大小資料直接儲存到本地，相比於cookie可以節約頻寬
localStorage的使用也是遵循同源策略的，所以不同的網站直接是不能共用相同的localStorage - 缺點：
需要手動刪除，否則長期存在
瀏覽器大小不一，版本的支援也不一樣
localStorage只支援string型別的儲存，JSON物件需要轉換
localStorage本質上是對字串的讀取，如果儲存內容多的話會消耗記憶體空間，會導致頁面變卡 - 特點：
同源策略限制、只在本地儲存、永久儲存、同瀏覽器共享
3）應用場合
- 資料比較大的臨時儲存方案。如線上編輯文章時的自動儲存。
- 多頁面訪問共同資料。sessionStorage只適用於同一個標籤頁，localStorage相比而言可以在多個標籤頁中共享資料。
3.sessionStorage
sessionStorage（會話儲存），只有在瀏覽器被關閉之前使用，建立另一個頁面時同意可以使用，關閉瀏覽器之後資料就會消失
1）使用方法
sessionStorage.setItem("key","value");//儲存 sessionStorage.getItems(key);//按key進行取值 sessionStorage.removeItems(key);//按key單個刪除 sessionStorage.clear();//刪除全部資料 sessionStorage.length;//獲得資料的數量 sessionStorage.valueOf();//獲取全部值
2）特點
- 同源策略限制。若想在不同頁面之間對同一個sessionStorage進行操作，這些頁面必須在同一協議、同一主機名和同一埠下。
- 單標籤頁限制。sessionStorage操作限制在單個標籤頁中，在此標籤頁進行同源頁面訪問都可以共享sessionStorage資料。
- 只在本地儲存。seesionStorage的資料不會跟隨HTTP請求一起傳送到伺服器，只會在本地生效，並在關閉標籤頁後清除資料
- 儲存方式。seesionStorage的儲存方式採用key、value的方式。value的值必須為字串型別(傳入非字串，也會在儲存時轉換為字串。)。
- 儲存上限限制：不同的瀏覽器儲存的上限也不一樣，但大多數瀏覽器把上限限制在5MB以下。
3）應用場合：sessionStorage 非常適合單頁應用程式，可以方便在各業務模組進行傳值。
4.localStorange與sessionStorage的區別
- 相同點：
存值都是以鍵值對形式存在，值也是存入字串型別（如果是物件，就序列化以後再存入）；
localStorage和sessionStorage使用時使用相同的API；
都是用來儲存客戶端臨時資訊的物件；
解決cookie大小4k的問題；解決請求頭常帶儲存資訊的問題；解決關係型儲存的問題 - 不同點：
H5的兩種儲存技術的最大區別就是生命週期。
localStorage是本地儲存，儲存期限不限；
sessionStorage是會話儲存，頁面關閉資料就會丟失。
5.web storage和cookie的區別
Web Storage包括localStorange與sessionStorage。它的概念和cookie相似，區別是它是為了更大容量儲存設計的。Cookie的大小是受限的，並且每次請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了頻寬，另外cookie還需要指定作用域，不可以跨域呼叫。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是與伺服器進行互動，作為HTTP規範的一部分而存在 ，而Web Storage僅僅是為了在本地“儲存”資料而生。
2、離線快取
Application Cache （Manifest）
1）使用方法：
1> 在html標籤新增manifest屬性
在頁面的html標籤中新增manifest屬性，屬性值為manifest檔案的路徑。如：
<!DOCTYPE HTML>
<html manifest="../js/demo.manifest">
...
</html>
2）編寫manifest檔案
manifest檔案是簡單的文字檔案，它會告知瀏覽器需要快取的內容以及不需要快取的內容。
manifest檔案可分為三部分：(1) CACHE MANIFEST - 在此標題下列出的檔案將在首次下載後進行快取
(2)NETWORK - 在此標題下列出的檔案需要與伺服器的連線，且不會被快取
(3)FALLBACK - 在此標題下列出的檔案規定當頁面無法訪問時的回退頁面（比如 404 頁面）
簡單示例： CACHE MANIFEST #version 1.1 /*版本號*/ CACHE: html/index.html /*需要快取的檔案*/ NETWORK: js/jquery.js /*不需要快取的檔案*/ FALLBACK: html/index.html /*當頁面無法訪問時的回退頁面*/
2）注意事項：
1.瀏覽器對快取資料的容量限制可能不太一樣 2.如果manifest檔案，或者內部列舉的某一個檔案不能正常下載，整個更新過程將視為失敗，瀏覽器會繼續載入之前的快取 3.引用的manifest檔案必須和html檔案同源，同域 4.瀏覽器的自動快取會導致更改了的html檔案必須更新版本才能更新頁面 5.更新版本後，必須重新整理一次才會啟動新版本 6.當manifest檔案發生改變時，資源請求本身也會觸發更新
3)離線快取與傳統瀏覽器快取區別：
瀏覽器快取（Browser Caching）是為了節約網路的資源加速瀏覽，瀏覽器在使用者磁碟上對最近請求過的文件進行儲存，當訪問者再次請求這個頁面時，瀏覽器就可以從本地磁碟顯示文件，這樣就可以加速頁面的閱覽。
區別： 1、離線快取是針對整個應用，瀏覽器快取是單個檔案 2、離線快取斷網了還是可以開啟頁面，瀏覽器快取不行 3、離線快取可以主動通知瀏覽器更新資源
3、本地儲存和離線儲存有什麼不同
本地儲存與離線快取都是為了方便網頁的載入，提高使用者體驗等。
本地儲存一般儲存的都是資料，而離線快取一般儲存的是網頁等。