cookie

2023年4月11日 129次阅读 来源: wanjeong

Cookie 是服務器保存在瀏覽器的一小段文本信息，每一個 Cookie 的大小平常不能凌駕4KB。瀏覽器每次向服務器發出要求，就會自動附上這段信息。

Cookie 重要用來區分兩個要求是不是來自同一個瀏覽器，以及用來保存一些狀況信息。

經常運用場所：
1.對話（session）治理：保存登錄、購物車等須要紀錄的信息。
2.個性化：保存用戶的偏好，比方網頁的字體大小、背景色等等。
3.追蹤：紀錄和剖析用戶行動。

不引薦作為客戶端貯存，缺少數據操縱接口，而且會影響機能。客戶端貯存應當運用 Web storage API 和 IndexedDB。

Cookie 包括以下幾方面的信息：
1.Cookie 的名字
2.Cookie 的值（真正的數據寫在這內里）
3.到期時刻
4.所屬域名（默許是當前域名）
5.見效的途徑（默許是當前網址）

瀏覽器能夠設置不接受 Cookie，也能夠設置不向服務器發送 Cookie。window.navigator.cookieEnabled屬性返回一個布爾值，示意瀏覽器是不是翻開 Cookie 功用。

// 瀏覽器是不是翻開 Cookie 功用
window.navigator.cookieEnabled // true

document.cookie屬性返回當前網頁的 Cookie。

平常來說，單個域名設置的 Cookie 不該凌駕30個，每一個 Cookie 的大小不能凌駕4KB。凌駕限定今後，Cookie 將被疏忽，不會被設置。

Cookie與 HTTP 協定

服務器假如願望在瀏覽器保存 Cookie，就要在 HTTP 回應的頭信息內里，安排一個Set-Cookie字段。

Set-Cookie:foo=bar//在瀏覽器保存一個名為foo的 Cookie，它的值為bar。

HTTP 回應能夠包括多個Set-Cookie字段，即在瀏覽器天生多個 Cookie。

HTTP/1.0 200 OKContent-type: text/htm
lSet-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

HTTP 要求：Cookie 的發送

瀏覽器向服務器發送 HTTP 要求時，每一個要求都邑帶上響應的 Cookie。也就是說，把服務器早前保存在瀏覽器的這段信息，再發還服務器。這時刻要運用 HTTP 頭信息的Cookie字段。

Cookie: foo=bar//向服務器發送名為foo的 Cookie，值為bar

服務器收到瀏覽器發來的 Cookie 時，有兩點是沒法曉得的。
Cookie 的種種屬性，比方什麼時刻逾期。
哪一個域名設置的 Cookie，究竟是一級域名設的，照樣某一個二級域名設的。
例子：

GET /sample_page.html HTTP/1.1Host: www.example.orgCookie: yummy_cookie=choco; tasty_cookie=strawberry

Cookie 的屬性

Expires屬性指定一個詳細的到期時刻，到了指定時刻今後，瀏覽器就不再保存這個 Cookie。它的值是 UTC 花樣，能夠運用Date.prototype.toUTCString()舉行花樣轉換。
假如不設置該屬性，或許設為null，Cookie 只在當前會話（session）有用，瀏覽器窗口一旦封閉，當前 Session 完畢，該 Cookie 就會被刪除。瀏覽器依據當地時刻，決議 Cookie 是不是逾期，因為當地時刻是不精確的，所以沒有辦法保證 Cookie 肯定會在服務器指定的時刻逾期。

Max-Age屬性指定從現在開始 Cookie 存在的秒數，比方60 60 24 * 365（即一年）。過了這個時刻今後，瀏覽器就不再保存這個 Cookie。
假如Set-Cookie字段沒有指定Expires或Max-Age屬性，那末這個 Cookie 就是 Session Cookie，即它只在本次對話存在，一旦用戶封閉瀏覽器，瀏覽器就不會再保存這個 Cookie。

Path屬性指定瀏覽器發出 HTTP 要求時，哪些途徑要附帶這個 Cookie。只需瀏覽器發明，Path屬性是 HTTP 要求途徑的開首一部分，就會在頭信息內裡帶上這個 Cookie。比方，PATH屬性是/，那末要求/docs途徑也會包括該 Cookie。固然，條件是域名必需一致。

Secure屬性指定瀏覽器只要在加密協定 HTTPS 下，才能將這個 Cookie 發送到服務器。另一方面，假如當前協定是 HTTP，瀏覽器會自動疏忽服務器發來的Secure屬性。該屬性只是一個開關，不須要指定值。假如通訊是 HTTPS 協定，該開關自動翻開。

HttpOnly屬性指定該 Cookie 沒法經由過程 JavaScript 劇本拿到，重如果Document.cookie屬性、XMLHttpRequest對象和 Request API 都拿不到該屬性。如許就防備了該 Cookie 被劇本讀到，只要瀏覽器發出 HTTP 要求時，才會帶上該 Cookie。

document.cookie

document.cookie屬性用於讀寫當前網頁的 Cookie。
讀取的時刻，它會返回當前網頁的一切 Cookie，條件是該 Cookie 不能有HTTPOnly屬性。
document.cookie // “foo=bar;baz=bar”

document.cookie屬性是可寫的，能夠經由過程它為當前網站增加 Cookie。
document.cookie = ‘fontSize=14’;

各個屬性的寫入注重點以下。
**1.path屬性必需為絕對途徑，默許為當前途徑。
2.domain屬性值必需是當前發送 Cookie 的域名的一部分。比方，當前域名是example.com，就不能將其設為foo.com。該屬性默許為當前的一級域名（不含二級域名）。
3.max-age屬性的值為秒數。
4.expires屬性的值為 UTC 花樣，能夠運用Date.prototype.toUTCString()舉行日期花樣轉換。**
document.cookie寫入 Cookie 的例子以下。

document.cookie = 'fontSize=14; '
  + 'expires=' + someDate.toGMTString() + '; '
  + 'path=/subdirectory; '
  + 'domain=*.example.com';

Cookie 的屬性一旦設置完成，就沒有辦法讀取這些屬性的值。

完成跨頁面傳值：

 var cookieUtil = {
            //增加cookie
            setCookie: function (name, value, expires) {
                var cookieText = encodeURIComponent(name) + "=" +
                    encodeURIComponent(value);
                if (expires && expires instanceof Date) {
                    cookieText += "; expires=" + expires;
                }
                // if (domain) {
                //     cookieText += "; domain=" + domain;
                // }
                document.cookie = cookieText;
            },
            //獵取cookie
            getCookie: function (name) {
                var cookieText = decodeURIComponent(document.cookie);
                var cookieArr = cookieText.split("; ");
                for (var i = 0; i < cookieArr.length; i++) {
                    var arr = cookieArr[i].split("=");
                    if (arr[0] == name) {
                        return arr[1];
                    }
                }
                return null;
            },
            //刪除cookie
            unsetCookie: function (name) {
                document.cookie = encodeURIComponent(name) + "=; expires=" +
                    new Date(0);
            }
        };
         //推斷是不是存在cookie，或是第一次增加
                var arr = cookieUtil.getCookie("car") ? JSON.parse(cookieUtil.getCookie("car")) : [];
                var date = new Date();
                    date.setDate(date.getDate() + 1); //保存十天
                    //保存cookie
                    cookieUtil.setCookie("car", JSON.stringify(arr), date);
//讀取cookie
 var arr = cookieUtil.getCookie("car");
  if (arr) {
                arr = JSON.parse(arr);

                //存在cookie則取出來顯現到頁面上
                for (var i = 0; i < arr.length; i++) {
                ...}
            }
    原文作者：wanjeong
    原文地址: https://segmentfault.com/a/1190000015069214
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞