本地存储——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);
   }