localstorage 和 sessionstorage 本地存儲

   在咱們平常的工做和實際項目中,作好數據數據緩存能夠是咱們的程序執行效率更高,可使咱們避免重複請求 服務器,減輕服務器的壓力,能夠提升使用戶的體驗度.

那麼 HTML5 存儲的目標是什麼?

 1.解決存儲 大小的問題

 2.解決請求頭帶存儲信息 的問題

 3.解決關係存儲的問題

 4.跨瀏覽器

在HTML5沒有出來以前,咱們的存儲一直大多都是使用cookies 存儲  可是cookies 有明顯的缺陷.

 cookies的缺陷:

 1.http請求頭上回帶着 會存在安全上的問題
 2.只能儲存4k大小的
 3.主DOM污染

可是在HTML5 以後,出現瞭解決緩存問題的API.

 一.localstorage 和 sessionstorage 本地存儲

　　這種你們都比較熟悉 存儲形式: key->value

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

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

　瀏覽器的支持除了IE７及如下不支持外，其餘標準瀏覽器都徹底支持

　　　　判斷瀏覽器是否支持localstorage

 　　　  if (window.localStorage) {
　　　　　　alert("瀏覽器支持localStorage");
　　　　　}else {
　　　　　　alert("瀏覽器不支持localStorage");
　　　　　}

　　過時時間: 永久存儲,永不失效,除非手動刪除
　　大小:每一個域名 5M
　　能夠存:數組 json 圖片 腳本 樣式文件
注意事項
　　<1.使用前要判斷瀏覽器是否支持
　　<2.寫數據時,須要異常處理,避免超出容量拋錯
　　<3.避免把敏感的信息存入localstorage
　　<4.key 的惟一性
　有四種方法 setItem,getItem,removeItem,clear

　　//setItem存儲value 　用法：.setItem( key, value)

　　localStorage.setItem('key','value');

　　localStorage.setItem('age','20'); // 存儲年齡 爲20

　　//getItem獲取value   用法：.getItem(key)

　　var  a =  localStorage.getItem('age');

　　// removeItem()  刪除key值

　　localStorage.setItem('name','coco');

　　var c= localStorage.removeItem('name');

　　console.log(c); // 打印出來是  undefined

　　// clear() 清楚全部的key/value

　　localStorage.clear();

　　也能夠這樣寫,這兩種 方式的結果是同樣的

             localStorage.name = 'coco';
             localStorage['name'] = 'koko';

 　　// localStorage的key和length屬性實現遍歷　 　　var storage = window.localStorage; 　　for (var i = 0; i < storage.length; i++) { 　　var key = storage.key[i]; 　　var value = storage.getItem(key); 　　console.log(key+'='+value); 　　}