本地存儲——Cookie與Web Storage

Cookie

---

cookie是客戶端用來存儲數據的,它既能夠在客戶端設置也能夠在服務器端設置。cookie會跟隨任意HTTP請求一塊兒發送

Web Storage

---

html5標準中的Web Storage包括了兩種存儲方式:sessionStorage和localStorage
sessionStorage用於本地存儲一個會話中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage僅僅是會話級別的存儲
而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的

區別

---

Web Storage和Cookie類似都是客戶端用來存儲數據的，區別是它是爲了更大容量存儲設計的
Cookie的大小是受限的，最多隻能存儲4KB的數據；而且每次你請求一個新的頁面的時候，Cookie都會被髮送過去，這樣無形中浪費了帶寬；再有就是不安全，很容易被攔截者截取進行篡改
Web Storage擁有setItem、getItem、removeItem、clear等方法，不像cookie須要本身封裝setCookie、getCookie等方法
可是Cookie也是不能夠或缺的:Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地存儲數據而生

操做方法

---

1. setItem

   sessionStorage.setItem("name","leoyaojy");
   localStorage.setItem("website","luckyw.cn");

2. getItem

   sessionStorage.getItem("name");        //leoyaojy
   localStorage.getItem("website");    //luckyw.cn

3. removeItem

   sessionStorage.removeItem("name");
   localStorage.removeItem("website");

4. clear

   sessionStorage.clear();
   localStorage.clear();

5. 其餘操做方法:點操做和[]

   sessionStorage.name = "leoyaojy";
   console.log(sessionStorage["name"]);
   
   localStorage["website"] = "luckyw.cn";
   console.log(localStorage.website);

6. key()和length遍歷數據

   for (var i=0, len = localStorage.length; i<len; i++){
       var key = localStorage.key(i);
       var value = localStorage.getItem(key);
       console.log(key + "=" + value);
   }