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

Neilyo 發布于2019-08-23 17:14 / 405人閱讀

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

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

特性

cookie在document下面

cookie可以設置一個時間自動去清除緩存，cookie如果不設置清除時間，則關閉瀏覽器自動清除。

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 的區別

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

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

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

云服務器 GPU云服務器 session與cookie的區別 cookies和session的區別 cookie和session的區別 session和cookie的區別

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104019.html

Javascript本地存儲小結

摘要：不是很安全，別人可以分析存放在本地的并進行欺騙，考慮到安全應當使用。因此不是一種持久化的本地存儲，僅僅是會話級別的存儲。用于持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。前言總括：詳細講述Cookie,LocalStorge,SesstionStorge的區別和用法。人生如畫，歲月如歌。原文博客地址：Javascript本地存儲小結知乎專欄&&簡書專題：前端...

garfileo 2019-08-20 12:19 評論0 收藏0
一文帶你看懂cookie，面試前端不用愁

摘要：的屬性在瀏覽器的控制臺中，可以直接輸入來查看。可以在瀏覽器的控制臺中看出哪些是類型的，下帶綠色對勾的即是，如圖只要是類型的在控制臺通過是獲取不到的，也不能進行修改。當會話過期或被放棄后，服務器將終止該會話。在中，用取代了。本文由云+社區發表在前端面試中，有一個必問的問題：請你談談cookie和localStorage有什么區別啊？ localStorage是H5中的一種瀏覽器本地存...

notebin 2019-08-23 13:59 評論0 收藏0
面試題總結

摘要：所以個人建議將登陸信息等重要信息存放為其他信息如果需要保留，可以放在中和屬性的異同共同點對內聯元素設置和屬性，可以讓元素脫離文檔流，并且可以設置其寬高。不同點仍會占據位置，會覆蓋文檔流中的其他元素。說說你對閉包的理解使用閉包主要是為了設計私有的方法和變量。閉包的優點是可以避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。閉包有三個特性：函...

RiverLi 2019-08-20 17:33 評論0 收藏0
常見前端本地存儲

摘要：說一說常用得本地存儲方法這個東西我覺得對于前端來講都不會很陌生，瀏覽器都會支持在最初得時候適用于客戶端存儲會話信息用的，在我們發送請求得時候，響應頭會包含此次會話得會話信息返回給客戶端，瀏覽器回存儲這樣得會話信息并且在本地有了之后，每次發送說一說常用得本地存儲方法 cookie localStorage sessionStorage cookie cookie這個東西我覺得對于前...

joy968 2019-08-26 10:23 評論0 收藏0
javascript知識點

摘要：握手過程中使用了的標志和。接收端收到后，回傳一個帶有標志的數據包以示傳達確認信息。第四次揮手主動關閉方收到后，發送一個給被動關閉方，確認序號為收到序號，至此，完成四次揮手。其次，通過使和系統綁定來降低泄露后的危險。一些開放性題目 1.自我介紹：除了基本個人信息以外，面試官更想聽的是你與眾不同的地方和你的優勢。 2.項目介紹 3.如何看待前端開發？ 4.平時是如何學習前端開發的？ 5....

zhangxiangliang 2019-08-20 14:21 評論0 收藏0