什麼是Cookie？有哪些類型？如何建立、讀取和删除？

我聽說英國人用biscuits代替cookies……很奇怪。

好吧，讓我們開始對Cookie進行詳細介紹。

什麼是Cookies？

Cookie，更恰當地稱為 HTTP Cookie，是在浏覽器上存儲為文本檔案的一小部分資料。Cookie 将資料位與特定使用者相關聯。

Cookies主要用于三個目的：

會話管理

登入、購物車、遊戲分數或伺服器應該記住的任何其他内容。

個性化

使用者首選項、主題和其他設定。

例如，可以儲存使用者的偏好，例如語言和首選主題，以備将來使用。

追蹤

記錄和分析使用者行為。

當使用者通路購物網站并搜尋商品時，該商品會儲存在他們的浏覽器曆史記錄中。Cookie 可以讀取浏覽曆史記錄，是以類似的内容會在使用者下次通路時顯示。

Cookie 的類型

Session cookie(會話 cookie)

會話 cookie，也稱為“臨時 cookie”，可幫助網站識别使用者以及使用者浏覽網站時提供的資訊。會話 cookie 僅在使用者在網站上時保留有關使用者活動的資訊。一旦網絡浏覽器關閉，cookies 就會被删除。

Permanent cookies(永久 cookies)

永久 cookie 也稱為“持久 cookie”。即使在 Web 浏覽器關閉後，它們仍會繼續運作。例如，他們可以記住登入詳細資訊和密碼，是以網絡使用者無需在每次使用網站時重新輸入。

Third-party cookies(第三方 cookie)

第三方 cookie 由第三方安裝，目的是從網絡使用者那裡收集某些資訊，以對行為、人口統計或消費習慣等進行研究。它們通常由希望確定産品和服務面向正确的目标閱聽人進行營銷的廣告商使用。

Flash cookie(快閃 cookie)

Flash cookie 也稱為“超級 cookie”。它們獨立于網絡浏覽器。它們旨在永久存儲在使用者的計算機上。即使在使用者的網絡浏覽器中删除了所有 cookie 之後，這些類型的 cookie 仍會保留在使用者的裝置上。

Zombie cookie(僵屍 cookie)

僵屍 cookie 是一種 flash cookie，在使用者删除它們後會自動重新建立。這意味着它們很難被發現或管理。它們通常用于線上遊戲中以防止使用者作弊，但也被用于将惡意軟體安裝到使用者的裝置上。

Secure Cookie(安全 Cookie)

隻有 HTTPS 網站可以設定安全 cookie，即帶有加密資料的 cookie。大多數情況下，電子商務網站的結賬或支付頁面都有安全的 cookie，以促進更安全的交易。同樣，出于安全原因，網上銀行網站也需要使用安全 cookie。

使用 Vanilla JavaScript 建立 Cookie

注意：要使下面的代碼起作用，您的浏覽器必須啟用本地 cookie 支援。

JavaScript 可以使用 document.cookie 屬性建立、讀取和删除 cookie。

使用 JavaScript，可以像這樣建立 cookie：

document.cookie = "name=Linda Ojo";

1

您還可以添加到期日期（UTC 時間）。預設情況下，當浏覽器關閉時，cookie 會被删除：

document.cookie = "name=Linda Ojo; expires=Wed, 1 Oct 2022 12:00:00 UTC";

使用 path 參數，可以告訴浏覽器 cookie 所屬的路徑。預設情況下，cookie 屬于目前頁面。

document.cookie = "name=Linda Ojo; expires=Wed, 1 Oct 2022 12:00:00 UTC; path=/";

僅使用普通 JavaScript 處理 Cookie 會很快變得乏味，這就是我更喜歡使用JavaScript Cookie Package的原因

使用JavaScript Cookie Package處理Cookie

JavaScript Cookie 是一個簡單的輕量級 JavaScript API，用于處理 cookie。它适用于所有浏覽器，接受任何字元，經過大量測試并且不需要依賴項。驚人的！

安裝

在根檔案夾中運作以下指令以安裝 js-cookies。

npm install js-cookie --save

Cookie 屬性

Expire：定義 cookie 将被删除的時間。值可以是一個數字，它将被解釋為從建立之日起的天數或一個 Date 執行個體。

Path：一個字元串，表示cookie可見的路徑。

Domain：一個字元串，訓示 cookie 應該可見的有效域。該 cookie 也将對所有子域可見。

Secure：true 或 false，訓示 cookie 傳輸是否需要安全協定 (https)。

建立一個cookie

我們可以通過提供如下所示的名稱和值來建立一個在整個網站上都有效的 cookie。

import Cookies from 'js-cookie';

Cookies.set('name', 'value');

我們可以通過傳遞一個包含過期天數的對象作為方法中的第三個參數來指定 cookie 過期所需的時間Cookie.set。下面建立的 cookie 将在 7 天後過期。預設情況下，當使用者關閉浏覽器時會删除 cookie。

Cookies.set('name', 'value', { expires: 7 });

接下來，我們可以建立一個安全的過期cookie，它隻對目前頁面的路徑有效。路徑被添加到包含到期日期的前一個對象。

Cookies.set('name', 'value', { expires: 7, path: '', secure: true });

讀取cookie

建立 cookie 的目的是為了我們以後可以使用它們。我們可以使用該Cookie.get方法通路已經存在的 cookie 。讓我們建立并讀取一個名為“主題”的真實 cookie。

Cookies.set('theme', 'dark');

Cookies.get('theme') // => 'dark'

您還可以通過覆寫其值來更新 cookie

Cookies.set('theme', 'light');

現在主題 cookie 的值為 ‘light’。

我們可以通過調用Cookies.getmethod 而不傳入任何參數來一次擷取所有 cookie ，如下所示。

Cookies.get(); // => { theme: 'light' }

删除cookie

您可以删除可全局通路的 cookie，Cookie.remove僅使用第一個參數運作該方法value

Cookies.remove('theme');

注意：當删除 cookie 并且您不依賴預設屬性時，您必須傳遞用于設定 cookie 的完全相同的路徑和域屬性。

我們以設定和删除一個對目前頁面路徑有效的cookie為例。

Cookies.set('direction', 'north', { path: '' });

Cookies.remove('direction'); // fail!

Cookies.remove('direction', { path: '' }); // removed!

這就是所有内容