document.cookie

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

cookie 可以作為單獨知識了解，這里其實介紹的是 document.cookie 。

1. document.cookie

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

2. 獲取 cookie

document.cookie;

通過 document.cookie 獲取到的 cookie 由 cookie 的名稱和值組成，由等號=分隔，并且可以有多條，每條 cookie 之間用分號 ‘;’ 分隔。

3. 設(shè)置cookie

var cookie = 'cookie名稱=cookie值';

document.cookie = cookie;

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

對應的就是 cookie的名稱 和 cookie值 。

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

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

4. 設(shè)置 cookie 屬性

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

document.cookie = '名稱=值; 屬性1=屬性值1; 屬性2=屬性值2';

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

可以跟隨的屬性有：

• path cookie 生效的路徑
• domain cookie 生效的域名
• max-age 過期時間，單位是秒
• expires 過期時間，為一個 UTC 時間
• secure 是否只能通過 https 來傳遞這條 cookie

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

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

在開發(fā)者工具的 Application 面板，cookie 分類下，每一條 cookie 都可以看到對應的屬性。

5. 注意點

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

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

document.cookie = cookie;

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

cookie 中不應該含有空格、分號、逗號這些符號。

借助 encodeURIComponent 方法，對 cookie 的值進行編碼就可以避免這類問題。

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

document.cookie = cookie;

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

注意：對字符串編碼還可以使用 escape 方法，但已經(jīng)從標準中移除，目前瀏覽器雖然還支持這個方法，但無法保證永遠會保留這個方法，最好避免使用 escape 方法。

6. 小結(jié)

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

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

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