- 關於客戶端存儲技術
- storage
一、關於客戶端(瀏覽器)存儲技術
瀏覽器的存儲技術第一個能想到的應該就是cookie，關於cookie本身出現的初衷是為了解決客戶端識別，可存儲信息量小（4k左右），並且每次網絡請求都會被請求協議攜帶發送到服務器，這在一定程度上是比較浪費網絡資源，損耗性能。
在HTML5中提供了一個新的客戶端存儲技術Storage：
cookie與storage的異同：
相同點：同樣受同源策略影響，只有在域名一致的情況下才能查看到對應的數據。
不同點：
1.cookie的數據存儲量在4K左右，storage的存儲量大約在5MB左右；
2.navigator.cookieEnabled檢測是否啟用了cookie，也就說cookie可以認為控制是否啟用。storage則是自動啟用，不會被人為關閉。
3.coocie中不建議使用分號、逗號、空格等特殊字符；如果需要使用可以使用轉碼操作：
encodeURIComponent()//傳入特殊字符轉碼，可以應用轉碼作為簡單的加密處理 decodeURIComponent()//將轉碼的字符轉換為正常字符
storage中只能接收字符串類型的數據，具體操作見下一節。
4.cookie有時效性可以設置有效時間，如果不設置的話在瀏覽器窗口關閉時就會失效；storage是永久存儲。
5.cookie會與服務器通信；storage只存在客服端，不參與服務器通信。
關於cookie的網絡應用可以參考這篇博客：計算機網絡(HTTP)之客戶識別：cookie機制
二、Storage的應用
- localStorage：永久存儲，除非手動刪除
- sessionStorage：臨時存儲，窗口關閉就會被清除
寫入與讀取localStorage數據：
1 // 寫入數據 2 localStorage.name = "duyi"; 3 localStorage.obj = JSON.stringify({ 4 name:'dengge' 5 }) 6 // 讀取數據 7 var name =localStorage.name; 8 var obj = JSON.parse(localStorage.obj);
寫入后可以在控制台的Application中查看得到數據：
localStorage與sessionStorage的寫入與讀取等操作方式一致，Storage的API及屬性（同時適應localStorage和sessionStorage）：
Storage.length：數據量（返回一個整數，標識存儲在Storage對象中的數據項數量）；
Storage.key(index)：獲取鍵名（該方法接收一個數值，返回對應數據的鍵名）；
Storage.getItem(item)：獲取與鍵對應的值（該方法接收一個鍵名作為參數，返回鍵名對應的值）；
Storage.setItem(item,val)：添加Storage數據（該方法接受兩個參數，第一個參數為數據名稱，第二個為數據值）；
Storage.removeItem(item)：刪除指定的數據（該方法接收一個鍵名，並把該鍵名對應的數據從存儲中刪除）；
Storage.clear()：清除該域下的所有Storage緩存的數據。