cookie的用法

設置cookie

function setCookie(name,value,hours,path,domain,secure){
          var cdata = name + "=" + value;
          if(hours){
              var d = new Date();
              d.setHours(d.getHours() + hours);
              cdata += "; expires=" + d.toGMTString();
          }
          cdata +=path ? ("; path=" + path) : "" ;
          cdata +=domain ? ("; domain=" + domain) : "" ;
          cdata +=secure ? ("; secure=" + secure) : "" ;
          document.cookie = cdata;
      }

讀取cookie

function getCookie(name){
  var reg = eval("/(?:^|;\\s*)" + name + "=([^=]+)(?:;|$)/"); 
  return reg.test(document.cookie) ? RegExp.$1 : "";
}

刪除cookie

function removeCookie(name,path,domain){
  this.setCookie(name,"",-1,path,domain);
}

參數註釋

名稱（name）：一個唯一確定cookie的名稱，部分大小寫，cookie的名字必須是經過URL編碼的，一般可以採用某個前綴在加上當前時間的做法，這樣的話名稱能夠確保是唯一的，也比較方便。
值（value）：存儲在cookie中的字符串值，必須經過被URL編碼
失效時間（hours）：小時爲單位
路徑（path）：指定域中的那個路徑，應該想服務器發送cookie，/ 表示沒有限制
安全標誌（secure）：指定以後，cookie只有在使用SSL連接的時候纔可以發送到服務器。設定cookie爲安全的(secure=true),只能在HTTPS或與其他安全協議，連接在一起的時候才被傳輸。
域（domain）：對於哪個域是有效的，如果沒有設置的話，默認來自設置cookie的那個域，在上訴例子中就是.Mozilla.org

例子

setCookie(“phone”,”444”,24,”/”,”.”,false);

刪除名稱爲”phone”的cookie
removeCookie (“phone”)

如果設置時設定了path參數，刪除名稱爲”phone”的cookie時，也需要傳入對應path參數
removeCookie(“phone”,”/”)

<html>
  <head>
    <script language="javascript">
      function Window_Load(){
       setCookie("name","111"); //臨時cookie
       setCookie("age","222",24 * 7);  //保存7天
       setCookie("address","333",24,"/"); //保存1天,path爲根目錄

       //設定cookie爲安全的(secure=true),只能在HTTPS或與其他<a href="https://www.baidu.com/s?wd=%E5%AE%89%E5%85%A8%E5%8D%8F%E8%AE%AE&tn=44039180_cpr&fenlei=mv6quAkxTZn0IZRqIHckPjm4nH00T1YLmWTznymLrjN9njm3rjP-0ZwV5Hcvrjm3rH6sPfKWUMw85HfYnjn4nH6sgvPsT6KdThsqpZwYTjCEQLGCpyw9Uz4Bmy-bIi4WUvYETgN-TLwGUv3EPHmLrj6vrHcs" target="_blank" class="baidu-highlight">安全協議</a>
       //連接在一起的時候才被傳輸
       setCookie("phone","444",24,"/",".",false);
       alert(document.cookie);
       alert(getCookie("age"));

       //刪除名稱爲"age"的cookie
       removeCookie("age") 
       alert(document.cookie);
       //刪除名稱爲"address"的cookie,因爲設置時設定的path,所以刪除
       //時也需要傳入對應path
       removeCookie("address","/") 
       alert(document.cookie);  
      }

      function setCookie(name,value,hours,path,domain,secure){
          var cdata = name + "=" + value;
          if(hours){
              var d = new Date();
              d.setHours(d.getHours() + hours);
              cdata += "; expires=" + d.toGMTString();
          }
          cdata +=path ? ("; path=" + path) : "" ;
          cdata +=domain ? ("; domain=" + domain) : "" ;
          cdata +=secure ? ("; secure=" + secure) : "" ;
          document.cookie = cdata;
      }

      function getCookie(name){
          var reg = eval("/(?:^|;\\s*)" + name + "=([^=]+)(?:;|$)/"); 
          return reg.test(document.cookie) ? RegExp.$1 : "";
      }

      function removeCookie(name,path,domain){
          this.setCookie(name,"",-1,path,domain);
      }

    </script>
  </head>
  <body onload="Window_Load();">

  </body>
</html>

cookie優點

1.通過良好的編程，控制保存在cookie中的session對象的大小。
2.通過加密和安全傳輸技術（SSL），減少cookie被破解的可能性。
3.只在cookie中存放不敏感數據，即使被盜也不會有重大損失。
4.控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。、
5.不需要服務器資源，直接存儲在本地。

cookie缺點

每個域的cookie總數是有限的，不同瀏覽器之間各有不同。
- IE6以及更低版本限制每個域名最多20個cookie
- IE7之後的版本每個域名最多50個。
- Firefox限制每個與最多50個cookie
- Safari和Chrome對於每個域的cookie數量限制沒有硬性規定。
cookie的清理
IE和Opera會刪除最近最少使用過的cookie，但是Firefox是隨機決定要清除哪個cookie。
cookie大小的限制
大多數瀏覽器4096B的長度限制，爲了兼容多種瀏覽器，最好將長度限制在4095B以內.
每個domain最多只能有20條cookie。
安全性
Cookie文件中可能含有涉密信息，可能會導致信息泄露。
Cookie可以被改寫，欺騙服務程序或者蒐集資料從事非法活動。

區別

數據大小不能超過4KB。
不管是否有需求，cookie數據都會在HTTP請求中攜帶，在瀏覽器和服務器中來回傳遞，佔用資源。
可以在後端設置修改，數據僅在本地瀏覽器保存。
cookie數據可以設置路徑，限制cookie只屬於某個路徑下。
默認數據失效是關閉瀏覽器，也可以設置失效時間

SessionStorage的用法

獲取sessionStorage

sessionStorage.getItem(keyName);          //獲取指定key的本地存儲的值
//或者
var keyName=sessionStorage.key;

添加sessionStorage:

sessionStorage.setItem(keyName,value);   // 將value存儲到key字段中
//或者
sessionStorage.keyName='value';

刪除sessionStorage

sessionStorage.removeItem(keyName);     // 刪除指定ke的本地存儲的值

區別

數據大小5M或者更大。
不會和跟隨HTTP請求，所以不會佔用資源。
數據存儲在瀏覽器僅在瀏覽器爲關閉的狀態，關閉窗口後數據就會銷燬。可以講是“臨時存儲”
sessionStorage在不同瀏覽器窗口下不會共享數據，即使打開同一個頁面。

localStorage的用法

獲取localStorage:

localStorage.getItem(keyName);          //獲取指定key的本地存儲的值
//或者
var keyName=localStorage.key;

添加localStorage:

localStorage.setItem(keyName,value);   // 將value存儲到key字段中
//或者
localStorage.keyName='value';

刪除localStorage:

localStorage.removeItem(keyName);     // 刪除指定ke的本地存儲的值

區別

數據大小5M或者更大。
不會和跟隨HTTP請求，所以不會佔用資源。
數據保存在本地硬件設備（通常指硬盤，也可以是其他），需要用戶主動刪除，否則就是永久保存。不同瀏覽器之間不會共享數據。

參考資料

[1]: < https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie#Summary >
[2]: 《JavaScript高級程序設計》Nicholas C.Zakas著李鬆峯曹力譯
[3]: < https://zhidao.baidu.com/question/567886920.html >
[4]: < https://segmentfault.com/a/1190000010098593 >
[5]: < http://blog.csdn.net/thronest/article/details/76850550 >
[6]: cookie詳解

cookie、SessionStorage、localStorage的用法