web前端必須掌握的localStorage

先自我介紹一下，本人男，27歲，單身，web前端程序員一枚，長期潛伏在幕後，只學不教（貔貅麼？），其實主要是工做太忙了，天天忙到11點左右，沒有時間寫東西，洗洗就睡了。最近趕巧，後端那邊出技術瓶頸了，於是小休息了兩天，優化了一下本身的grunt自動化。

今每天氣很好，陽光明媚的，忽然一激動就想開個博客了，固然做爲博客園新人不來點料不是霸佔資源麼，思來想去仍是先教教新手們如何使用localStorage吧，畢竟這個東西對前端來講過重要了。

好了，閒話不說進入正題。

localStorage，俗名本地存儲，是一個只有5M大小的瀏覽器端存儲工具，不過相比cookie的幾K存儲量來講，存儲空間還算是提高了很多，這個東東在哪裏看呢(⊙o⊙)?

打開瀏覽器—>F12—>算了直接上圖吧o(╯□╰)o

上圖：

看吧，不是個很複雜的東西，很直觀嘛，下面教你們如何使用，

第一步，

算了，知道大家都是懶蟲，我直接封裝好了，copy吧：

 1 /*設置與獲取Cookie*/
 2 var Cookie ={}
 3 Cookie.write = function(key, value, duration){
 4 var d = new Date();
 5 d.setTime(d.getTime()+1000*60*60*24*30);
 6 document.cookie = key + "=" + encodeURI(value) + "; expires=" + d.toGMTString();
 7 };
 8 Cookie.read = function(key){
 9 var arr = document.cookie.match(new RegExp("(^| )"+key+"=([^;]*)(;|$)"));
10 if(arr != null)
11 return decodeURIComponent(arr[2]);
12 return "";
13 };
14 //定義本地存儲對象
15 var storage = {
16  getItem:function(key){//假如瀏覽器支持本地存儲則從localStorage裏getItem，不然乖乖用Cookie
17  return window.localStorage? localStorage.getItem(key): Cookie.read(key); 
18  },
19  setItem:function(key,val){//假如瀏覽器支持本地存儲則調用localStorage，不然乖乖用Cookie
20   if (window.localStorage) {
21       localStorage.setItem(key,val); 
22   } else {
23    Cookie.write(key,val); 
24   }
25  }
26  };

封裝的比較簡單，若是有更多須要能夠本身再擴張一下，使用的話是蠻簡單的，

舉例：

1 storage.setItem("UserName","黃大帥哥");//將UserName存進去
2 if(storage.getItem("UserName"))//假如存進去了
3 {
4  console.log(storage.getItem("UserName"));//打印出來樣子
5 }

注意事項：

由於localStorage存儲進去的都是string類型，因此若是要存json記得存前讀後作些處理

1 var myJson={"UserName","黃大帥哥"};
2 storage.setItem("MyJson",JSON.stringify(myJson));//將myJson存進去，記得JSON.stringify轉成字符串
3 var getmyJson=JSON.parse(storage.getItem("MyJson"));//取出來的是字符串，記得JSON.parse還原一下

結尾：是否是以爲玩轉localStorage如此輕鬆了，未來什麼性能優化，減小與服務器的請求，用戶歷史行爲記錄等均可以經過它來完成，就看你能想到多少靈感了