好吧，讓我們開始對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";

您還可以添加到期日期（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，

import Cookies from 'js-cookie';

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

接下來，我們可以創建一個安全的過期cookie，它只對當前頁面的路徑有效，路徑被添加到包含到期日期的前一個物件，

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

讀取cookie

創建 cookie 的目的是為了我們以后可以使用它們，我們可以使用該Cookie.get方法訪問已經存在的 cookie ，讓我們創建并讀取一個名為“主題”的真實 cookie，

import Cookies from 'js-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!

這就是所有內容

更多相關文章及我的聯系方式我放在這里：

https://github.com/wanghao221

最后，不要忘了?或📑支持一下哦