H5 web 儲存之 Webstorage

標籤：gif   awesome   ebs   使用   支援   return   try   als   對象   

H5提供了兩種在用戶端儲存資料的方式：
localStorage 持久化的本機存放區（瀏覽器關閉重新開啟資料依然存在）
sessionStorage 針對一個session的本機存放區
之前這些都是由cookie來完成的，cookie的特點是儲存量小，在伺服器和用戶端之間來回傳遞，傳輸效率不高。一般可以在判斷註冊的使用者是否登入該本網站。
webStorage API 繼承於Window對象，並提供了兩個新的屬性-Window.localStorage 和 Window.sessionStorage.
webStorage的優勢：

1. 相比cookie儲存容量增加
2. 可以將請求的表單資料存於本地，減少http請求，節約頻寬
3. webStorage擁有易用的API

webStorage的局限性：

1. 不同瀏覽器webStorage 和LocalStorage的大小不統一。
2. 在瀏覽器的隱私模式下面是不可讀取的
3. 本質上是對字串的讀取，因此儲存內容過多時頁面會變卡
4. 不能被爬蟲抓取到

使用webStorage
1.儲存資料：
　　localStorage.name = ‘value‘;
　　localStorage[‘name‘] = ‘value‘;
　　localStorage.setItem(‘name‘,‘value‘);
　　注意鍵和值總是字串。建議使用webStorage API(setItem,getItem,removeItem,key,length)
2.擷取資料：
　　var value = localStorage.getItem(‘name‘);
　　var value = localStorage.name;
　　var value = localStorage[‘name‘];
3.刪除資料：
　　清空所有資料
　　　　localStorage.clear();
　　刪除特定資料；
　　　　localStorage.removeItem(‘name‘);
4.檢測瀏覽器是否支援：
　　function storageAvailable(type) {
　　　　try {
　　　　　　var storage = window[type],
　　　　　　x = ‘__storage_test__‘;
　　　　　　storage.setItem(x, x);
　　　　　　storage.removeItem(x);
　　　　　　return true;
　　　　}
　　　　catch(e) {
　　　　　　return false;
　　　　}
　　}
　　if (storageAvailable(‘localStorage‘)) {
　　　　// Yippee! We can use localStorage awesomeness
　　}
　　else {
　　　　// Too bad, no localStorage for us
　　}
5.就是儲存物件了，我們需要進行轉換為字串存入，等到使用的時候取出再轉為對象。
　　var str = JSON.stringify(obj);
　　localStorage.mydata = str;
　　var obj = JSON.parse(localStorage.mydata);
到這裡就結束了，算是對webStorage基本使用的一些小總結，希望可以對你有所協助。

H5 web 儲存之 Webstorage