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

Neilyo 發(fā)布于2019-08-23 17:14 / 396人閱讀

摘要：不是下面的屬性，它是下面的屬性，有一套專門的取值與賦值方法，與，不同特性在下面可以設(shè)置一個時間自動去清除緩存，如果不設(shè)置清除時間，則關(guān)閉瀏覽器自動清除。

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

特性

cookie在document下面

cookie可以設(shè)置一個時間自動去清除緩存，cookie如果不設(shè)置清除時間，則關(guān)閉瀏覽器自動清除。

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";

注意：

設(shè)置過期時間使用的是0時區(qū)的時間，而我們北京時間是+8區(qū)的時間，所以這個時候要調(diào)用 toUTCString() 轉(zhuǎn)換為標(biāo)準(zhǔn)時區(qū)的時間；

path=/path2 設(shè)置只有在路徑path2下面的網(wǎng)頁才能訪問（前提是同域）,如果是 path=/ 則說明是根路徑，任何同域頁面都可以訪問。

賦值后打開 Application 查看 cookie

普通賦值

帶過期時間，設(shè)置10s后過期

帶路徑，設(shè)置只有在路徑path2下面的網(wǎng)頁才能訪問（前提是同域）

這個時候發(fā)現(xiàn)在 cookie3.html 找不到這個cookie

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

封裝

cookie 屬性和值是用 = 連接，屬性之間用 ; 分隔，根據(jù)這個特點進行封裝

var CookieHelper = {
    addCookie: function (cookieName, cookieValue, exMinutes, cookiePath) {
        // 第三/四個參數(shù)，按需傳參
        var str = cookieName + "=" + cookieValue;
        if (arguments.length == 3) {
            let d = new Date();
            d.setTime(Date.now() + exMinutes*60*1000); // 過期單位這里設(shè)置為分鐘
            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 的區(qū)別

localStorage，sessionStorage在window下面， cookie在document下面

localStorage要手動清除，sessionStorage關(guān)閉瀏覽器自動清除，而cookie可以設(shè)置一個時間自動去清除,cookie如果不設(shè)置清除時間，則關(guān)閉瀏覽器自動清除。

localStorage可以跨同域頁面，sessionStorage只能跨父子頁面（通過 open() 打開的頁面），cookie它可以跨頁面，但是不可以跨path路徑(子路徑可以取到父級路徑的) 。他們都不能跨域