著互聯網的發展，越來越多的網站開始使用 cookie 來保存用戶的偏好設置、登錄狀態等信息。cookie 是一種存儲在用戶瀏覽器中的小文本文件，用于跟蹤用戶的行為和識別用戶身份。在前端開發中，我們常常需要使用 cookie 來保存和獲取一些數據。而 js-cookie 就是一個用于操作 cookie 的 JavaScript 庫。

js-cookie 是一個簡單易用的 cookie 操作庫，它提供了一系列的方法來操作 cookie。下面我們就來詳細了解一下 js-cookie。

安裝 js-cookie

在使用 js-cookie 之前，我們需要先安裝它。可以通過 npm 包管理器來安裝 js-cookie：

npm install --save js-cookie

使用 js-cookie

安裝完 js-cookie 后，我們就可以在 JavaScript 代碼中使用它了。下面是一些常見的使用方法：

// 將數據保存到 cookie
Cookies.set('name', '張三');

// 通過 cookie 獲取數據
var name = Cookies.get('name');

// 刪除 cookie
Cookies.remove('name');

以上代碼通過 js-cookie 的 set 方法將數據保存到 cookie 中，通過 get 方法獲取 cookie 中的數據，通過 remove 方法刪除 cookie。

js-cookie 的其他方法

除了上述方法外，js-cookie 還提供了一些其他的方法，如下所示：

1. Cookies.getJSON(key): 通過 cookie 獲取 JSON 格式的數據。
2. Cookies.getAll(): 獲取所有 cookie 的名稱和值。
3. Cookies.enabled: 一個布爾值，表示當前瀏覽器是否支持 cookie。

總結

js-cookie 是一個簡單易用的 cookie 操作庫，它提供了一系列的方法來操作 cookie。使用 js-cookie 可以簡化 cookie 操作的代碼，并提高代碼的可讀性。在前端開發中，我們可以根據實際需求來使用 js-cookie 來保存和獲取 cookie 中的數據。

eb 服務器和 HTTP 服務器是無狀態的，因此當 Web 服務器將網頁發送到瀏覽器時，連接會被斷開，服務器會忘記與用戶相關的所有內容。

那么瀏覽器和 Web 服務器是怎樣記住用戶信息的？cookie 被發明出來解決這個問題。

當用戶訪問網頁時，他們的名字、唯一 ID 或其他任何信息都可以存儲在瀏覽器的 cookie 中。當用戶下次又回到網頁時，cookie 將記住他們的名字或唯一 ID。

Cookie 只是存儲在計算機瀏覽器中的小型文本文件。它們包含以下數據：

1. 保存數據的 Name-value 對
2. 日期到期時，該 cookie 失效
3. 應將其發送到的服務器的域和路徑

而cookie也有一些值得一提的限制：

每個cookie的最大為 4096 字節

每個域最多20個cookie（每個瀏覽器略有不同）

Cookie是其自己的域名專用的（網站無法讀取其他域的 Cookie，只能是它自己的）

大小限制適用于整個cookie，而不僅僅是它的值

在瀏覽器中，cookie通過 DOM 被公開為 document.cookies。

下面我們將介紹如何用 JavaScript 在瀏覽器中設置、獲取、更新和刪除 Cookie 數據。

目錄

Create Cookies

Read Cookies

Update Cookies

Delete Cookies

Create Cookies

用 JavaScript 在瀏覽器中設置 cookie 非常簡單！我將在下面向你展示。

設置 Cookie

以下是在瀏覽器中用 JavaScript 創建新 cookie 的執行代碼：

document.cookie = "userId=nick123"

運行該代碼后，打開瀏覽器，你應該能在開發者工具的 Application（Safari 或Chrome）或 Storage（Firefox）中找到該 cookie。

設置 cookie 的過期時間

你還可以向 Cookie 中添加過期時間（UTC），告知瀏覽器應該在什么時候將其刪除：

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC"

設置一個 Cookie 路徑

你還可以告訴瀏覽器 cookie 所屬的路徑（默認值是當前頁面的路徑）：

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user"

設置 cookie 域

我們將介紹的最后一段數據是 cookie 所屬的域（默認為當前域）：

document.cookie = "userId=nick123; expires=Wed, 15 Jan 2020 12:00:00 UTC; path=/user; domain=mysite.com"

Read Cookies

通過 document.cookie 對象，用 JavaScript 讀取 cookie 也非常簡單：

讀取單個頁面所有的 Cookie

將單個頁面的所有 cookie 作為字符串獲取，每個 cookie 用分號分隔：

const cookies = document.cookie

讀取具有特定名稱的Cookie

要訪問具有特定名稱的 cookie，我們需要獲取頁面上所有的 cookie 并解析字符串，然后查找我們想要尋找的 cookie 名稱的匹配項。

這是一個用正則表達式完成此任務的函數：

function getCookieValue(name) {
  let result = document.cookie.match("(^|[^;]+)\\s*" + name + "\\s*=\\s*([^;]+)")
  return result ? result.pop() : ""
}

你這樣使用該函數：

getCookieValue("userId") //returns nick123

這將返回與提供給函數的 name 參數對應的字符串值。

如果你還沒有掌握正則表達式，還有另一個同樣功能的函數：

function getCookieValue(name) {
  const nameString = name + "="
  
  const value = document.cookie.split(";").filter(item => {
    return item.includes(nameString)
  })
  
  if (value.length) {
    return value[0].substring(nameString.length, value[0].length)
  } else {
    return ""
  }
}

用相同的方法使用該函數：

getCookieValue("userId") //returns nick123

Update Cookies

你可以通過創建的方式用新值覆蓋 cookie 來更改它的值。

你可以用此代碼覆蓋本文前面創建的 cookie "userId" ：

document.cookie = "userId=new_value"

當你再次運行 getCookieValue 函數時，將返回新值：

getCookieValue("userId") //returns new_value

Delete Cookies

你可以給 cookie 設置一個空值，并將其過期日期設置為過去的任意時間來刪除 cookie。

如果我們想要刪除前面例子的 cookie "userId" ，請按以下步驟操作：

document.cookie = "userId=; expires=Thu,