客戶端存儲——Cookie

Cookie

性質瀏覽器

  • 響應時:服務器會設置set-Cookie字段返回給客戶端
  • 請求時:瀏覽器會將值保存在請求域名對應的cookie當中進行發送

限制安全

  • 域名設置一個cookie之後,每次向這個域名發送請求時都會包含這個cookie
  • 在同一域名下,本地存儲的cookie數量是有限的

構成
舉例:Set-Cookie:name=value;expires=Mon,22-Jan-07 07:10:24 GMT;domain=.baidu.com; path=/; secure服務器

  • 名稱(name):用來表示一個惟一肯定的Cookie,進行url編碼
  • 值(value):存儲在Cookie中的字符串值,進行url編碼
    ps:url編碼有三種方法cookie

    (1)escape/uescape:進行unicode字符編碼與解碼
    (2)encodeURI/decodeURI:對特殊字符不進行編碼
    (3)encodeURIComponent/decodeURIComponent:對特殊字符也會進行編碼
  • 域(domain):表示哪一個域名設置的Cookie,全部向這個域名發送的請求都會包含這個Cookie,能夠是一個域名也能夠是一個子域。如:baidu.com(包含這個域名下面的全部子域:www.baidu.com、im.baidu.com),例子中是對應的子域
  • 路徑(path):指定域名中特定的路徑才能訪問cookie
  • 失效時間(expires):指定中止向服務器發送cookie的時間,若是沒有設置或者設置的是之前的時間,瀏覽器就在結束會話的時候刪除掉全部的cookie值
  • 安全標誌(secure):只有使用https協議才能夠發送cookie

原生實現cookie的增刪改查dom

const CookieUtil = {
      get:function(name){
        const cookie = document.cookie;

        const cookieName = encodeURIComponent(name) + '=';
        const cookieStart = cookie.indexOf(cookieName);
        let cookieValue = null;

        if(start > -1){
            let cookieEnd = cookie.indexOf(';', cookieStart);

            if(cookieEnd === -1){
                  cookieEnd = cookie.length;
            }

            cookieValue = cookie.substring(cookieStart+cookieName.length, cookieEnd);
        }

        return cookieValue;
      },
      
      set:function(name, value, expires, domain, path, secure){
         let cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);

         if(expires){
            cookieText += "; expires=" + expires.toUTCString();
         }

         if(domain){
            cookieText += "; domian=" + domain;   
         }

         if(path){
            cookieText += "; path=" + path;
         }

         if(secure){
             cookieText += '; secure';  
         }

         document.cookie = cookieText;
         console.log(document.cookie);
      },
      
      delete:function(name, domian, path, secure){
        this.set(name, '', new Date(0), domian, path, secure);
      }
}
相關文章
相關標籤/搜索