【BOM編程】-- cookie的賦值、過時時間、path路徑，封裝，以及與Storage的區別

cookie 不是window下面的屬性，它是document下面的屬性，cookie有一套專門的取值與賦值方法，與localStorage，sessionStorage不一樣

特性

1. cookie在document下面
2. cookie能夠設置一個時間自動去清除緩存，cookie若是不設置清除時間，則關閉瀏覽器自動清除。
3. cookie它能夠跨頁面，可是不能夠跨path路徑(子路徑能夠取到父級路徑的) ，前提是同域

賦值

• 新建一個文件夾，在文件夾下新建一個html頁面 cookie3.html 和一個名爲path2的文件夾
• 在path2文件夾下新建 cookie4.html
• 先看一下cookie：

• 賦值

  // 普通賦值
  document.cookie = 'userName=Aihh' 
  
  // 帶過時時間 10s後清除cookie
  var d = new Date();
  d.setTime(Date.now() + 10*1000);
  document.cookie = 'userName=Aihh;Expires=' + d.toUTCString(); 
  
  // 帶訪問路徑
  document.cookie="age=18;path=/path2";

  注意：

  • 設置過時時間使用的是0時區的時間，而咱們北京時間是+8區的時間，因此這個時候要調用 toUTCString() 轉換爲標準時區的時間；
  • path=/path2 設置只有在路徑path2下面的網頁才能訪問（前提是同域）,若是是 path=/ 則說明是根路徑，任何同域頁面均可以訪問。

• 賦值後打開 Application 查看 cookie

  • 普通賦值

    

  • 帶過時時間，設置10s後過時

    

  • 帶路徑，設置只有在路徑path2下面的網頁才能訪問（前提是同域）

    • 這個時候發如今 cookie3.html 找不到這個cookie

      

    • 再打開path2下面的 cookie4.html ，就會看到這個cookie

      

封裝

cookie 屬性和值是用 = 鏈接，屬性之間用 ; 分隔，根據這個特色進行封裝

var CookieHelper = {
    addCookie: function (cookieName, cookieValue, exMinutes, cookiePath) {
        // 第三/四個參數，按需傳參
        var str = cookieName + "=" + cookieValue;
        if (arguments.length == 3) {
            let d = new Date();
            d.setTime(Date.now() + exMinutes*60*1000); // 過時單位這裏設置爲分鐘
            str += ";Expires=" + d.toUTCString();
        }
        if (arguments.length == 4) {
            str += ";path=" + cookiePath;
        }
        document.cookie = str;
    },
    getCookie: function (cookieName) {
        var cookieArr = document.cookie.split(";");
        for (let i in cookieArr) {
            var arr = cookieArr[i].split("=");
            if (arr[0].trim() == cookieName) {
                return arr[1];
            }
        }
    },
    removeCookie: function (cookieName) {
        document.cookie = cookieName + "= ;Expires=" + (new Date()).toUTCString();
    }
}

與 localStorage，sessionStorage 的區別

1. localStorage，sessionStorage在window下面， cookie在document下面
2. localStorage要手動清除，sessionStorage關閉瀏覽器自動清除，而cookie能夠設置一個時間自動去清除,cookie若是不設置清除時間，則關閉瀏覽器自動清除。
3. localStorage能夠跨同域頁面，sessionStorage只能跨父子頁面（經過 open() 打開的頁面），cookie它能夠跨頁面，可是不能夠跨path路徑(子路徑能夠取到父級路徑的) 。他們都不能跨域