第一方和第三方cookie是什么？

天的論題是cookie的作用及cookie 的分類。首先cookie是追蹤訪問者行為中的重要一環(huán)，在所有的檢測系統(tǒng)和追蹤工具中想是不可或缺的。cookie最初的作用并不是用來追蹤訪問者行為，而是網(wǎng)站用來記錄訪問者的用戶信息、歷史記錄、訪問偏好，以及判定老訪客的登錄狀態(tài)，并且通過這世信息提升訪問者在網(wǎng)站的使用體驗(yàn)。

例如：新訪客并不需要每次都以用戶名和密碼進(jìn)行登錄操作，在訪問淘寶時(shí)，可以看到上次瀏情的商品信息。這些都是依靠Cookie中存儲的信息如果將瀏覽器中所有Cookie都清空，再訪問經(jīng)常光顧的網(wǎng)站時(shí)就會發(fā)現(xiàn)Cookie有多重要了。

cookies分為第一方Cookie和第三方Cookie，這兩類Cookie都是網(wǎng)站保存在用戶電腦上的一個(gè)文件，它們都由某個(gè)特定的域創(chuàng)建，并且只能被這個(gè)域訪問。我們可以通過瀏覽器或第三方工具來查看網(wǎng)站對我們設(shè)置的Cookie情況，它們之間的區(qū)別歸根結(jié)底在于是什么域名創(chuàng)建了 cookies。

第一方cookie

第一方 cookie 指的是由網(wǎng)絡(luò)用戶訪問的域創(chuàng)建的 cookie。例如：當(dāng)用戶通過網(wǎng)絡(luò)瀏覽器點(diǎn)擊我博客rrdaj.com 時(shí)，瀏覽器會在第一個(gè)頁面中發(fā)送一個(gè)網(wǎng)頁請求，這個(gè)過程需要用戶直接與 rrdaj.com 互動(dòng)。這樣網(wǎng)絡(luò)瀏覽器隨后就將此數(shù)據(jù)文件保存到“rrdaj.com”域名下的用戶計(jì)算機(jī)上。

大多數(shù)網(wǎng)頁瀏覽器都支持第一方 cookies。

為什么？

因?yàn)槿绻憬玫谝环?cookies，當(dāng)你瀏覽網(wǎng)頁從一頁跳到另一頁的時(shí)候，網(wǎng)站無法跟蹤你的活動(dòng)。再比如：每次你從購物網(wǎng)站的其他頁面向購物車添加一些東西，它就會被視為一個(gè)新的動(dòng)作而沒有被記錄下來，這樣你將無法在同一交易中在線購買多個(gè)商品了。

第三方Cookie

第三方cookie是建立在別的域名不是你訪問的域名（地址欄中的網(wǎng)址），比如：廣告網(wǎng)絡(luò)商就是最常見的第三方 cookies 的來源，他們用它們在多個(gè)網(wǎng)站上追蹤用戶的行為，當(dāng)然這些活動(dòng)可以用來調(diào)整廣告。此外圖像、 JavaScript 和 iframe 通常也會導(dǎo)致第三方 cookies 的生成。

像前不久的GDPR，用戶就不會像第一方cookie那樣對第三方 cookies 那么友好了，有的用戶就不會對它進(jìn)行買單。

為什么？

因?yàn)樵S多人認(rèn)為這是對他們隱私的侵犯，是對他們數(shù)字安全的威脅。（例如：下圖baidu.com就是屬于第三方的cookie記錄）

對于第三方 cookies 來說，最常見的用法是在不同領(lǐng)域去跟蹤用戶，尤其是廣告商。在識別和跟蹤單個(gè)域名的用戶時(shí)，第一方 cookie 非常有用。

然而，有時(shí)候你想要在多個(gè)領(lǐng)域跟蹤用戶，比如：

（1）你經(jīng)營著一個(gè)擁有多個(gè)子品牌的大品牌，如果你是一家比較大的零售商或食品飲料公司或者是電商，你可能會在主品牌下?lián)碛卸鄠€(gè)品牌，例如：大家都熟悉的服飾品牌Gap旗下就有好幾個(gè)子品牌（GAP、Banana Republic、Old Navy、Piperlime、Athleta），每個(gè)子品牌都有自己的域名。

因此也有自己的第一方cookie，這意味著主品牌www.gap.com母公司不能使用第一方 cookies 來識別其他子品牌網(wǎng)站上的用戶了。這樣第三方cookie就起作用了，可以用它去追蹤子品牌，比如：ab-inbev.com下的用戶行為，方便做大數(shù)據(jù)管理。

（2）第二種情況就是我上面說的廣告商，這個(gè)好理解，比如：我們熟知的Google Adsense ，通過第三方cookie，谷歌可以通過他們?nèi)プR別這些1400多萬個(gè)網(wǎng)站（可能還有更多）的用戶信息，國內(nèi)有很多廣告聯(lián)盟也是同樣的道理。

因此，應(yīng)對方法就出來了，一些用戶使用像 AdBlock Plus 和 NoScript 這樣的插件來阻止諸如廣告和 JavaScript 之類的東西在網(wǎng)站上加載，從而阻止了第三方 cookies 的創(chuàng)建。更常見的是，或者他們使用配置他們的瀏覽設(shè)置，這樣網(wǎng)頁瀏覽器就會屏蔽或清除它們。

作者：該吃藥了，公號：ISEOers（ID：iseo888）

本文由 @該吃藥了原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議

ookie

什么是 Cookie?

先要了解HTTP是無狀態(tài)的Web服務(wù)器，什么是無狀態(tài)呢？一次對話完成后下一次對話完全不知道上一次對話發(fā)生了什么。如果在Web服務(wù)器中只是用來管理靜態(tài)文件還好說，對方是誰并不重要，把文件從磁盤中讀取出來發(fā)出去即可。但是隨著網(wǎng)絡(luò)的不斷發(fā)展，比如電商中的購物車只有記住了用戶的身份才能夠執(zhí)行接下來的一系列動(dòng)作。所以此時(shí)就需要我們無狀態(tài)的服務(wù)器記住一些事情。

那么Web服務(wù)器是如何記住一些事情呢？既然Web服務(wù)器記不住東西，那么我們就在外部想辦法記住，相當(dāng)于服務(wù)器給每個(gè)客戶端都貼上了一個(gè)小紙條。上面記錄了服務(wù)器給我們返回的一些信息。然后服務(wù)器看到這張小紙條就知道我們是誰了。那么Cookie是誰產(chǎn)生的呢？Cookies是由服務(wù)器產(chǎn)生的。接下來我們描述一下Cookie產(chǎn)生的過程

瀏覽器第一次訪問服務(wù)端時(shí)，服務(wù)器此時(shí)肯定不知道他的身份，所以創(chuàng)建一個(gè)獨(dú)特的身份標(biāo)識數(shù)據(jù)，格式為key=value，放入到Set-Cookie字段里，隨著響應(yīng)報(bào)文發(fā)給瀏覽器。

瀏覽器看到有Set-Cookie字段以后就知道這是服務(wù)器給的身份標(biāo)識，于是就保存起來，下次請求時(shí)會自動(dòng)將此key=value值放入到Cookie字段中發(fā)給服務(wù)端。

服務(wù)端收到請求報(bào)文后，發(fā)現(xiàn)Cookie字段中有值，就能根據(jù)此值識別用戶的身份然后提供個(gè)性化的服務(wù)。

如何創(chuàng)建 Cookie

Servlet 程序中的代碼：

protected void createCookie(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1 創(chuàng)建Cookie對象
        Cookie cookie=new Cookie("key4", "value4");
        //2 通知客戶端保存Cookie
        resp.addCookie(cookie);
        //1 創(chuàng)建Cookie對象
        Cookie cookie1=new Cookie("key5", "value5");
        //2 通知客戶端保存Cookie
        resp.addCookie(cookie1);

        resp.getWriter().write("Cookie創(chuàng)建成功");
    }

Cookie創(chuàng)建成功！

服務(wù)器如何獲取 Cookie

服務(wù)器獲取客戶端的 Cookie 只需要一行代碼：req.getCookies():Cookie[]

Cookie 的工具類：

public class CookieUtils {
    /**
     * 查找指定名稱的 Cookie 對象
     * @param name
     * @param cookies
     * @return
     */
    public static Cookie findCookie(String name , Cookie[] cookies){
        if (name==null || cookies==null || cookies.length==0) {
            return null;
        }
        for (Cookie cookie : cookies) {
            if (name.equals(cookie.getName())) {
                return cookie;
            }
        }
        return null;
    }
}

Servlet 程序中的代碼：

    protected void getCookie(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        Cookie[] cookies=req.getCookies();



        for (Cookie cookie : cookies) {
            // getName方法返回Cookie的key（名）
            // getValue方法返回Cookie的value值
            resp.getWriter().write("Cookie[" + cookie.getName() + "=" + cookie.getValue() + "] <br/>");
        }


        Cookie iWantCookie=CookieUtils.findCookie("key1", cookies);
        // 如果不等于null，說明賦過值，也就是找到了需要的Cookie
        if (iWantCookie !=null) {
            resp.getWriter().write("找到了需要的Cookie");
        }


    }

Cookie 值的修改

方法一：
1、先創(chuàng)建一個(gè)要修改的同名（指的就是 key）的 Cookie 對象
2、在構(gòu)造器，同時(shí)賦于新的 Cookie 值。
3、調(diào)用 response.addCookie( Cookie );

// 1 、先創(chuàng)建一個(gè)要修改的同名的 Cookie 對象
// 2 、在構(gòu)造器，同時(shí)賦于新的 Cookie 值。
Cookie cookie=new Cookie("key1","newValue1");
// 3 、調(diào)用 response.addCookie( Cookie ); 通知 客戶端 保存修改
resp.addCookie(cookie);

方法二：

1、先查找到需要修改的 Cookie 對象
2、調(diào)用 setValue()方法賦于新的 Cookie 值。
3、調(diào)用 response.addCookie()通知客戶端保存修改

1 、先查找到需要修改的 Cookie 對象
Cookie cookie=CookieUtils.findCookie("key2", req.getCookies());
if (cookie !=null) {
// 2 、調(diào)用 setValue() 方法賦于新的 Cookie 值。
cookie.setValue("newValue2");
// 3 、調(diào)用 response.addCookie() 通知客戶端保存修改
resp.addCookie(cookie);
}

瀏覽器查看 Cookie(以edge瀏覽器為例)

在頁面空白區(qū)域右鍵，然后點(diǎn)擊檢查：

Cookie 生命控制

Cookie 的生命控制指的是如何管理 Cookie 什么時(shí)候被銷毀（刪除）
setMaxAge()
正數(shù)，表示在指定的秒數(shù)后過期
負(fù)數(shù)，表示瀏覽器一關(guān)，Cookie 就會被刪除（默認(rèn)值是-1）
零，表示馬上刪除 Cookie

例：

protected void life3600(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
    Cookie cookie=new Cookie("life3600", "life3600");
    cookie.setMaxAge(60 * 60); // 設(shè)置 Cookie 一小時(shí)之后被刪除。無效
    resp.addCookie(cookie);
    resp.getWriter().write(" 已經(jīng)創(chuàng)建了一個(gè)存活一小時(shí)的 Cookie");
}
protected void deleteNow(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
    // 先找到你要?jiǎng)h除的 Cookie 對象
    Cookie cookie=CookieUtils.findCookie("key4", req.getCookies());
    if (cookie !=null) {
        // 調(diào)用 setMaxAge(0);
        cookie.setMaxAge(0); // 表示馬上刪除，都不需要等待瀏覽器關(guān)閉
        // 調(diào)用 response.addCookie(cookie);
        resp.addCookie(cookie);
        resp.getWriter().write("key4 的 的 Cookie 已經(jīng)被刪除");
    }
}
protected void defaultLife(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
    Cookie cookie=new Cookie("defalutLife","defaultLife");
    cookie.setMaxAge(-1);// 設(shè)置存活時(shí)間
    resp.addCookie(cookie);
}

Cookie 有效路徑 Path 的設(shè)置

Cookie 的 path 屬性可以有效的過濾哪些 Cookie 可以發(fā)送給服務(wù)器。哪些不發(fā)。
path 屬性是通過請求的地址來進(jìn)行有效的過濾。
CookieA path=/工程路徑
CookieB path=/工程路徑/abc

請求地址如下：

http://ip:port/工程路徑/a.html

CookieA 發(fā)送
CookieB 不發(fā)送

http://ip:port/工程路徑/abc/a.html

CookieA 發(fā)送
CookieB 發(fā)送

例：

protected void testPath(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
IOException {
    Cookie cookie=new Cookie("path1", "path1");
    // getContextPath()===>>>> 得到工程路徑
    cookie.setPath( req.getContextPath() + "/abc" ); //===>>>> / 工程路徑 /abc
    resp.addCookie(cookie);
    resp.getWriter().write(" 創(chuàng)建了一個(gè)帶有 Path 路徑的 Cookie");
}

Cookie 實(shí)操---免輸入用戶名登錄

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登錄頁面</title>
</head>
<body>
    <form action="http://localhost:8080/Test/loginServlet" method="get">
        用戶名：<input type="text" name="username" value="${cookie.username.value}"> <br>
        密碼：<input type="password" name="password"> <br>
        <input type="submit" value="登錄">
    </form>
</body>
</html>

LoginServlet ：

public class LoginServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username=req.getParameter("username");
        String password=req.getParameter("password");

        if ("kailong".equals(username) && "123456".equals(password)) {
            //登錄 成功
            Cookie cookie=new Cookie("username", username);
            cookie.setMaxAge(60 * 60 * 24 * 7);//當(dāng)前Cookie一周內(nèi)有效
            resp.addCookie(cookie);
            System.out.println("登錄 成功");
        } else {
//            登錄 失敗
            System.out.println("登錄 失敗");
        }

    }
}

試驗(yàn)：

第一次登錄：

點(diǎn)擊登錄后，控制臺顯示登錄成功

然后我們關(guān)了瀏覽器再打開這個(gè)頁面

再打開這個(gè)頁面可以發(fā)現(xiàn)用戶名已經(jīng)存在，這就是cookie保存了用戶名信息，然后這里設(shè)置的是Cookie有效期為一周，一周后該Cookie就失效了

公眾號本文地址：一文了解Cookie

歡迎關(guān)注公眾號：愚生淺末。

正式介紹cookie之前我們要先來說一說網(wǎng)絡(luò)通訊協(xié)議

首先：什么是網(wǎng)絡(luò)通訊協(xié)議？所謂協(xié)議一般就是甲乙雙方溝通要遵循的規(guī)則與方式，那么通訊協(xié)議就是通訊雙方要遵循的規(guī)則，網(wǎng)絡(luò)通訊協(xié)議則是計(jì)算機(jī)雙方傳輸數(shù)據(jù)所要遵循的協(xié)議，瀏覽網(wǎng)頁時(shí), 一般使用http或者h(yuǎn)ttps，而它們都是基于TCP/IP協(xié)議的。

TCP/IP協(xié)議是面向連接的

在發(fā)送數(shù)據(jù)之前，都必須先在雙方之間建立一條連接。在TCP/IP協(xié)議中，TCP 協(xié)議提供可靠的連接服務(wù)，連接是通過三次握手進(jìn)行初始化的，如下圖：

客戶端要向服務(wù)器發(fā)送請求，首先會發(fā)送一個(gè)請求連接，這是第一次握手；
當(dāng)服務(wù)器收到這個(gè)請求以后返回給客戶端一條消息，這是第二次握手；
然后客戶端再把確認(rèn)消息發(fā)給服務(wù)器，這是第三次握手；

經(jīng)過這三次握手客戶端與服務(wù)器之間的連接就建立起來了。

就像打電話一樣，客戶端向服務(wù)器撥通電話，服務(wù)器接起電話，說了一句：“喂？”，然后客戶端收到了這句“喂”，再跟服務(wù)器說一聲“喂！”，連接就建立好了，可以愉快的通話了

建立連接需要經(jīng)過三次握手，那數(shù)據(jù)傳輸結(jié)束以后呢？我們打電話事情說完了要掛掉電話要經(jīng)歷一個(gè)怎樣的過程？可能對話是下面這樣的：

A：“我掛了”

B：“好”

A：“拜拜”

B：“拜拜，我也掛了”

A：“好，拜拜”

B：“嗯嗯，拜拜，掛了”

A：“好，拜拜”

B：“拜拜”

有點(diǎn)搞笑，經(jīng)過好多次消息確認(rèn)好不容易才能把電話掛掉，但這并不是無聊，而是要互相確認(rèn)對方是否真的已經(jīng)準(zhǔn)備斷開連接了，那么我們的TCP/IP協(xié)議也會考慮到這一點(diǎn)，要斷開連接會經(jīng)過四次揮手，如下圖：

數(shù)據(jù)傳輸結(jié)束時(shí)，客戶端向服務(wù)器發(fā)送一條結(jié)束的消息，服務(wù)器收到消息后會馬上返回給客戶端確認(rèn)消息，并隨后發(fā)送一條“我也結(jié)束了”的消息，當(dāng)客戶端收到這條消息以后會響應(yīng)給服務(wù)器確認(rèn)消息，服務(wù)器收到這條確認(rèn)消息以后就會關(guān)閉，而客戶端則會等待兩個(gè)單位時(shí)間之后關(guān)閉。注意這里客戶端并不是立馬關(guān)閉，而是會等帶兩個(gè)單位時(shí)間，為什么是兩個(gè)單位時(shí)間呢？首先，所謂的單位時(shí)間指的是一次前后端數(shù)據(jù)傳輸所花費(fèi)的時(shí)間，這里要等待兩個(gè)單位時(shí)間是因?yàn)榭蛻舳艘葦?shù)據(jù)發(fā)送到服務(wù)器以后確認(rèn)收不到數(shù)據(jù)返回，這一來一去就是兩個(gè)單位時(shí)間了，因?yàn)槿绻@個(gè)時(shí)候服務(wù)器并沒有結(jié)束的話會再次給客戶端響應(yīng)，而客戶端在兩個(gè)單位時(shí)間后收不到響應(yīng)則代表本次數(shù)據(jù)傳輸正式結(jié)束。

下面貼出兩張動(dòng)圖：

這兩張動(dòng)圖對于計(jì)算機(jī)專業(yè)的讀者可以嘗試探究，本文不做詳細(xì)展開

http無狀態(tài)

HTTP協(xié)議, 使我們用戶上網(wǎng)常見的協(xié)議, 簡單的理解, 它是基于TCP/IP協(xié)議改造加工出來的，也就是說每一個(gè)http請求都會通過三次握手建立連接，傳輸數(shù)據(jù), 然后四次揮手?jǐn)嚅_連接.

例如當(dāng)你登錄淘寶的時(shí)候, 你的瀏覽器跟淘寶服務(wù)器之間就行了一個(gè) http鏈接.

然后, 當(dāng)首頁數(shù)據(jù)加載完成, 鏈接就斷開了.

這時(shí)服務(wù)就無法保存你的狀態(tài). 你瀏覽了什么商品? 購物車加了幾個(gè)東西? 有沒有關(guān)閉瀏覽器? 服務(wù)器統(tǒng)統(tǒng)不知道了

所以, 我們說：http協(xié)議是一種無狀態(tài)協(xié)議，這里的無狀態(tài)指的是無法保存狀態(tài)，因?yàn)橐坏?shù)據(jù)傳輸結(jié)束連接就會斷開，就無法獲取一些狀態(tài)了，這樣設(shè)計(jì)的好處就是可以節(jié)約資源，需要的時(shí)候才發(fā)出請求，但是也會造成一些困擾，

尤其是關(guān)于身份驗(yàn)證. 用戶在登錄頁面完成了登錄，那么接下來就會回到首頁或者其他頁面進(jìn)行操作，但問題是這個(gè)時(shí)候登錄的這次http請求已經(jīng)結(jié)束了，所以當(dāng)完成頁面跳轉(zhuǎn)之后就取不到登錄狀態(tài)了，那怎么辦？再登錄一次？

當(dāng)你反復(fù)使用http協(xié)議跟服務(wù)器建立鏈接的時(shí)候, 服務(wù)器怎么才能知道, 你是一個(gè)登錄過的合法用戶?? 為了解決這個(gè)問題, 出現(xiàn)了cookie技術(shù).

cookie

cookie稱之為會話跟蹤技術(shù)，顧名思義，就是在一次會話中跟蹤記錄一些狀態(tài)。首先，所謂的”會話“指的就是從瀏覽器打開一個(gè)網(wǎng)站到訪問它的其他網(wǎng)頁直到瀏覽器關(guān)閉的這個(gè)過程。

cookie就可以在一次會話從開始到結(jié)束的整個(gè)過程，全程跟蹤記錄客戶端的狀態(tài)（例如：是否登錄、購物車信息、是否已下載、是否已點(diǎn)贊、視頻播放進(jìn)度等等）。

cookie是服務(wù)器存儲在客戶端本地的一個(gè)文件. 它就好比服務(wù)器發(fā)給客戶端的一個(gè)身份標(biāo)識, 有了這個(gè)身份牌, 只要客戶端隨身攜帶這個(gè)身份牌. 服務(wù)器就能識別我們的身份了

cookie的特點(diǎn)

只能存儲文本
單條存儲有大小限制4KB左右
數(shù)量限制（一般瀏覽器，限制大概在50條左右）
讀取有域名限制：不可跨域讀取，只能由來自寫入cookie的同一域名的網(wǎng)頁可進(jìn)行讀取。簡單的講就是，哪個(gè)服務(wù)器發(fā)給你的cookie，只有哪個(gè)服務(wù)器有權(quán)利讀取（身份牌是我的，當(dāng)然只有我能讀取，你媳婦兒的手機(jī)自動(dòng)連接了鄰居老王家的wifi，你知道這意味著什么嗎？）
時(shí)效限制：每個(gè)cookie都有時(shí)效，默認(rèn)的有效期是，會話級別：就是當(dāng)瀏覽器關(guān)閉，那么cookie立即銷毀，但是我們也可以在存儲的時(shí)候手動(dòng)設(shè)置cookie的過期時(shí)間
路徑限制：存cookie時(shí)候可以指定路徑，只允許子路徑讀取外層cookie，外層不能讀取內(nèi)層。一般cookie都存在項(xiàng)目的根目錄，這樣就可以避免這種問題。

cookie的使用

其實(shí), 如果是單純的身份驗(yàn)證場景下, 前端開發(fā)是用不到cookie的

從服務(wù)器發(fā)送cookie給瀏覽器, 瀏覽器保存cookie, 到瀏覽器每次發(fā)送請求 ,攜帶著cookie文件, 這些事情瀏覽器全部都可以自己完成. 根本不需要我們前端開發(fā)人員參與.

但我們有時(shí)也會利用cookie, 在前端存儲一些狀態(tài)信息.

比如某個(gè)視頻看到了32分15秒.

我們可以通過前端操作, 直接將這個(gè)數(shù)據(jù)保存在本地cookie文件中

下次打開網(wǎng)站, 我們再次讀取這個(gè)信息

然后直接向服務(wù)器請求32分16秒的視頻內(nèi)容.

前端如何通過JS操作cookie

cookie的使用方式很簡單，系統(tǒng)提供的只有一個(gè)屬性 document.cookie，無論是存還是取或者其他操作都是通過這一個(gè)屬性來完成（注：cookie是http協(xié)議下的技術(shù)，所以不要用file的方式打開本地html文件測試cookie，雖然由部分瀏覽器也在file協(xié)議下實(shí)現(xiàn)了cookie，但是不推薦這么做）。

首先，我們來看看如何存：

document.cookie='username=dary' // 存一條username為dary的cookie

但是如果當(dāng)我們要存一條中文的cookie，比如：username=張三，在部分低版本瀏覽器就會遇到一些位置錯(cuò)誤，這時(shí)就可以使用 encodeURIComponent 編碼對中文進(jìn)行編碼：

document.cookie=`username=encodeURIComponent('大林')`

可以看到，中文內(nèi)容已經(jīng)被編碼了，以后取得時(shí)候我們可以通過decodeURIComponent 方法進(jìn)行解碼，下文會提到

cookie的時(shí)效性

現(xiàn)在我們回頭去看看上面我們存過的cookie，其中有Expires/max-Age選項(xiàng)，這一項(xiàng)指的就是cookie的有效期，我們可以看到是session，代表會話期，也就是默認(rèn)的會話結(jié)束cookie失效，這時(shí)我們重啟瀏覽器就看不到這條cookie了。

除了默認(rèn)的會話過期我們還可以手動(dòng)設(shè)置cookie的過期時(shí)間，比如：7天后過期

var date=new Date()
date.setDate(date.getDate() + 7)
document.cookie=`username=${encodeURIComponent('大林')};expires=${date.toUTCString()}`

我們可以看到過期時(shí)間已經(jīng)是7天以后了，這里我用了toUTCString()方法轉(zhuǎn)成了標(biāo)準(zhǔn)時(shí)區(qū)，所以比北京時(shí)間快8個(gè)小時(shí)，這時(shí)我們關(guān)閉瀏覽器再次打開，仍然可以看到這條cookie

cookie的存儲路徑

我們來測試一下路徑，隨便進(jìn)入項(xiàng)目中某一個(gè)目錄或者新建一個(gè)目錄，然后把一下代碼放進(jìn)去執(zhí)行

document.cookie='username=dary'

我們可以看到，path不再是之前的 / 了，而是當(dāng)前目錄，這時(shí)我們再回到首頁，你會發(fā)現(xiàn)，這條cookie不見了，因?yàn)橥鈱訒r(shí)訪問不了內(nèi)層目錄存的cookie的。

所以我們一般存cookie都會這么寫：

document.cookie='username=dary;path=/'

不管當(dāng)前目錄是誰統(tǒng)一存根目錄，這樣項(xiàng)目中任意位置都可以訪問這一條cookie，這就perfect 啦！

由此：我們可以封裝一個(gè)存儲cookie的方法如下：

/** 存一條cookie
 * @param {string} key 要存的cookie的名稱
 * @param {string} value 要存的cookie的值
 * @param {object} [options] 可選參數(shù)，過期時(shí)間和目錄，如：{ path: '/', expires: 7 }存根目錄7天過期的cookie
 */
function setCookie (key, value, options) {
    var str=`${key}=${encodeURIComponent(value)}`
    // 先判斷options是否傳進(jìn)來了
    if (options) {
        // 如果傳進(jìn)來了再判斷有哪個(gè)屬性
        if (options.path) {
            // 路徑拼接進(jìn)去
            str +=`;path=${options.path}`
        }
        if (options.expires) {
            var date=new Date()
            // 日期設(shè)置為過期時(shí)間
            date.setDate(date.getDate() + options.expires)
            str +=`;expires=${date.toUTCString()}`
        }
    }
    document.cookie=str
}

取cookie

現(xiàn)在我們掌握了如何存cookie，接下來看看怎么取吧

取cookie同樣使用document.cookie這個(gè)屬性：

console.log(document.cookie) // username=dary

但是如果我們在一個(gè)網(wǎng)站里存了多條cookie，這個(gè)時(shí)候得到的結(jié)果就是

console.log(document.cookie) // username=dary; age=18

多條cookie之間以; 隔開，注意：這里是分號和一個(gè)空格，這個(gè)對我們拆開每一條cookie非常重要。所以我們現(xiàn)在希望能把cookie每一條拆開，得到一個(gè)對象，這樣就可以取得某一條cookie的值了，所以我們可以封裝一個(gè)獲取cookie的方法如下：

/** 獲取某一條cookie
 * @param {string} key 要獲取的cookie的名稱
 * @retrun {string} 當(dāng)前這條cookie的值
 */
getCookie (key) {
    var str=document.cookie
    var arr=str.split('; ')
    var obj=new Object()
    arr.forEach(item=> {
        var subArr=item.split('=')
        obj[subArr[0]]=decodeURIComponent(subArr[1])
    })
    return obj[key]
}

刪除cookie

刪除cookie的方式特別簡單，我們只需要把cookie的過期時(shí)間設(shè)置為已經(jīng)過去了的時(shí)間就行了，這個(gè)時(shí)候?yàn)g覽器一看，誒？這條cookie不是已經(jīng)過期了么？就只能把它刪掉了，方法如下：

/** 刪一條cookie
 * @param {string} key 要?jiǎng)h的cookie的名稱
 * @param {path} [path] 可選參數(shù)，要?jiǎng)h的cookie的所在的路徑，如果就是當(dāng)前路徑這個(gè)參數(shù)可以不傳
 */
function removeCookie (key, path) {
    var date=new Date()
    date.setDate(date.getDate() - 1) // 過期時(shí)間設(shè)置為昨天
    var str=`${key}='';expires=${date.toUTCString()}`
    if (path) {
        str +=`;path=${path}`      
    }
    document.cookie=str
}

修改cookie

重新存一下把之前的覆蓋掉就是修改了cookie了

附

最后附上一個(gè)cookie方法，既可以完成存也可以取，甚至可以刪

在線咨詢

上一篇：Adobe Acrobat Pro DC 安裝包下載
下一篇：方便！社保繳費(fèi)證明打印，網(wǎng)上就能辦

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商