document.cookie

Cookie 是一個(gè)請(qǐng)求首部，其中含有先前由服務(wù)器通過(guò) Set-Cookie 首部投放并存儲(chǔ)到客戶端的 HTTP cookies。

cookie 可以作為單獨(dú)知識(shí)了解，這里其實(shí)介紹的是 document.cookie 。

1. document.cookie

通過(guò) document.cookie 可以獲取與設(shè)置 cookie 。

2. 獲取 cookie

document.cookie;

通過(guò) document.cookie 獲取到的 cookie 由 cookie 的名稱(chēng)和值組成，由等號(hào)=分隔，并且可以有多條，每條 cookie 之間用分號(hào) ‘;’ 分隔。

3. 設(shè)置cookie

var cookie = 'cookie名稱(chēng)=cookie值';

document.cookie = cookie;

設(shè)置 cookie 采用鍵值對(duì)的形式。

對(duì)應(yīng)的就是 cookie的名稱(chēng) 和 cookie值 。

每次只能設(shè)置一條 cookie ，但可以同時(shí)設(shè)置這條 cookie的屬性 。

如果需要設(shè)置多條 cookie ，則再次給 document.cookie 賦一個(gè)新值即可，但如果是相同名稱(chēng)的 cookie ，值就會(huì)被覆蓋。

4. 設(shè)置 cookie 屬性

設(shè)置 cookie 的同時(shí)可以設(shè)置這條 cookie 的屬性。

document.cookie = '名稱(chēng)=值; 屬性1=屬性值1; 屬性2=屬性值2';

看起來(lái)是可以設(shè)置多條 cookie 一樣，其實(shí)只有第一對(duì)值才是 cookie 的值，后面跟的都是這條 cookie 的屬性。

可以跟隨的屬性有：

• path cookie 生效的路徑
• domain cookie 生效的域名
• max-age 過(guò)期時(shí)間，單位是秒
• expires 過(guò)期時(shí)間，為一個(gè) UTC 時(shí)間
• secure 是否只能通過(guò) https 來(lái)傳遞這條 cookie

這些屬性具體作用可以參考 cookie 相關(guān)的內(nèi)容。

設(shè)置完屬性可以通過(guò)開(kāi)發(fā)者工具查看。

在開(kāi)發(fā)者工具的 Application 面板，cookie 分類(lèi)下，每一條 cookie 都可以看到對(duì)應(yīng)的屬性。

5. 注意點(diǎn)

由于設(shè)置 cookie 是具有一定格式的，所以不能有字符來(lái)干擾這個(gè)格式。

var cookie = 'code=var a = 1; var b = 2;';

document.cookie = cookie;

這種情況下，cookie 就不符合預(yù)期了，被切斷。

cookie 中不應(yīng)該含有空格、分號(hào)、逗號(hào)這些符號(hào)。

借助 encodeURIComponent 方法，對(duì) cookie 的值進(jìn)行編碼就可以避免這類(lèi)問(wèn)題。

var cookie = 'code=' + encodeURIComponent('var a = 1; var b = 2;');

document.cookie = cookie;

后續(xù)需要使用到這一條 cookie 的地方，再做一次解碼操作即可。

注意：對(duì)字符串編碼還可以使用 escape 方法，但已經(jīng)從標(biāo)準(zhǔn)中移除，目前瀏覽器雖然還支持這個(gè)方法，但無(wú)法保證永遠(yuǎn)會(huì)保留這個(gè)方法，最好避免使用 escape 方法。

6. 小結(jié)

隨著前端存儲(chǔ)方案的增加，前端程序員訪問(wèn) document.cookie 相對(duì)曾經(jīng)減少了很多。

給 document.cookie 賦值可以增加一條 cookie，同時(shí)通過(guò) ; 相隔，來(lái)設(shè)置這條 cookie 的屬性。

當(dāng)設(shè)置的 cookie 帶有特殊字符的時(shí)候，如 ; 或者 =，應(yīng)采用 encodeURIComponent 對(duì)內(nèi)容編碼，建議所有的 cookie 都進(jìn)行編碼。