客户端存储——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编码有三种方法

  （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的增删改查

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);
      }
}