cookie,localStorage,sessionStorage的區別

1、概念

1. Cookie
   • 什麼是Cookie —— Cookie 是一些數據, 存儲於你電腦上的文本文件中。
2. localStorage
   • 什麼是 localStorage —— localStorage 是指將信息數據存儲在客戶端本地的硬件上，即便瀏覽器被關閉了，信息數據一樣存在
3. sessionStorage
   • 什麼是 sessionStorage —— sessionStorage 是指將信息數據存儲在session對象中，因此當瀏覽器關閉後，sessionStorage也隨之清空

 

2、如何使用（一些API和常見用法）

1. Cookie（參考菜鳥教程https://www.runoob.com/js/js-cookies.html
   • 建立Cookie

     document.cookie = 'username=Doe';    // 基本設置
     
     document.cookie = 'username=Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT';     // 基本設置 + 過時時間（默認狀況下cookie在瀏覽器關閉時刪除）

   • 讀取Cookie

     var x = document.cookie;        // 讀取cookie

   • 修改Cookie

     // 給key從新賦值便可，例如原來的username=Doe,修改成John
     document.cookie = 'username=John';

   • 獲取Cookie值得函數

     function getCookie(cname){
         var name = cname + '=';
         var ca = document.cookie.split(';');
         for(var i = 0; i < ca.length; i++){
             var c = ca[i].trim();    // trim()用於除去先後空格
             if(c.indexOf(name) == 0) return c.substring(name.length, c.length);
          }
          return '';
     }

   • 檢測Cookie是否存在

     // 檢測cookie中是否有咱們想要得數據，可使用getCookie函數（上面那個↑
     
     function checkCookie() {
         var username = getCookie('username');
         if(username == ''){
             alert('welcome');
         }
         else {
             username = prompt('Please enter your name:', '');
             if(username != '' && username != null){
                 setCookie('username', username, 365);
             }
         }
     }
     
     // 設置cookie
     function setCookie(key, value, time){
         var d = new Date();
         d.setTime(d.getTime() + (time * 24 * 60 * 60 * 1000));
         var expires = 'expires=' + d.toGMTString();
          document.cookie = key + '=' + value + ";" + expires;
     }

2. localStorage
   • 新建localStorage

     localStorage.setItem(key, value);

   • 查詢localStorage裏的value

     localStorage.getItem(key);

   • 清除某一個localStorage

     localStorage.removeItem(key);

   • 清除全部得localStorage

     localStorage.clear();

   • 獲取localStorage裏得全部key和值

     function getAll() {
         var valueArr = [];
     　　 var keyArr = [];
         for(var i = 0; i < localStorage.length; i++){
             var key = localStorage.getKey(i);
             keyArr.push(key);
             valueArr.push(localStorage.getItem(key);
         }
         return newArr;
     }

3. sessionStorage
   • API與localStorage一致

 

3、cookie、sessionStorage、localStorage 的區別

1. 大小
   • cookie： 4K左右，很小很小；
   • sessionStorage 和 localStorage：5M；
2. 有效期
   • cookie：使用expire設置過時時間
   • sessionStorage：瀏覽器關閉則清空，生命週期爲僅在當前對話下
   • localStorage：不手動清空則不會清除，生命週期爲永遠
3. 是否會將數據發給服務器
   • cookie：每次訪問都會傳送cookie給服務器，即便是不須要的時候，這樣會浪費帶寬
   • sessionStorage 和 localStorage：不傳送

---------------------------------------------------------------------------------------------------------------分割線---------------------------------------------------------------------------------------------------------------

多說一點點 T^T

cookie 如何防範XSS攻擊

XSS 是指攻擊者在返回的HTML中嵌入JS腳本，爲減輕這些攻擊，須要在HTTP頭部配上set-cookie: 

httponly: 這個屬性能夠防止XSS，由於他會禁止JavaScript腳原本訪問cookie

secure: 這個屬性告訴瀏覽器僅在請求爲https的時候發送cookie

 

 

挖個坑，詳細的cookie如何防範xss（2019/9/12）