用於現代 Web 開發的 JavaScript Cookie 程式庫-js教程-PHP中文網

op JavaScript Cookie Libraries for Modern Web Development

Cookie 是 Web 開發、處理使用者會話、個人化、分析和身份驗證等任務的基礎。雖然存在令牌和 localStorage 等較新的方法，但 cookie 由於其簡單性、廣泛的瀏覽器支援和伺服器客戶端同步而仍然很流行。然而，手動 JavaScript cookie 管理很容易出錯。這就是專用 cookie 庫的價值所在，它可以簡化實施、增強安全性並降低複雜性。

本文探討了 2024 年前 5 個 JavaScript cookie 函式庫，比較了功能、用例並提供了程式碼範例。這些程式庫簡化了各種專案的開發，從單頁應用程式 (SPA) 到伺服器渲染網站和跨平台工具。對於進階 cookie 管理和 Web 驗證安全性，這裡提供了全面的指南。

1。 js-cookie：輕量級領導者

GitHub 星數：21k

每週下載量：450 萬次

概述

js-cookie 是 JavaScript cookie 管理的首選。其最小的 API 和缺乏依賴性簡化了讀取、寫入和刪除 cookie，同時優先考慮安全性。

主要特點

支援 ES 模組、AMD 和 CommonJS。
自動 cookie 值編碼/解碼。
用於高效編碼的可連結方法。
原生 JSON 物件支援。

安裝

<code>npm install js-cookie  </code>

登入後複製

使用範例

<code>// Set a cookie  
Cookies.set('user', 'Alice', { expires: 7, secure: true });  

// Get a cookie  
const user = Cookies.get('user'); // "Alice"  

// Remove a cookie  
Cookies.remove('user');  

// Store JSON data  
Cookies.set('preferences', { theme: 'dark', notifications: true });  
const prefs = Cookies.getJSON('preferences'); // { theme: 'dark', ... }  </code>

登入後複製

優點

尺寸極小（不到 2 KB）。
強大的瀏覽器和伺服器 (Node.js) 相容性。
使用者友善的語法。

缺點

缺乏內建的 cookie 同意管理。

最適合

需要簡單、可靠的 cookie 實用程式的項目。
SPA 和靜態網站。

2。 universal-cookie：React 最佳化解決方案

GitHub 星數：2.3k

每週下載量：120 萬次

概述

universal-cookie 專為通用（同構）JavaScript 應用程式而設計，可在瀏覽器和 Node.js 環境中無縫運作。它在 React 生態系統中特別受歡迎，與用於狀態管理的 react-cookie 等工具很好地整合。

主要功能

客戶端和伺服器端的API一致。
React Hooks 支援。
TypeScript 相容性。

安裝

<code>npm install universal-cookie  </code>

登入後複製

與 React 一起使用

<code>npm install js-cookie  </code>

登入後複製

優點

非常適合服務器端渲染（Next.js、Nuxt.js）。
與 React 上下文和狀態順利集成。

缺點

與 js-cookie 相比，包大小稍大。

最適合

通用應用程序和基於 React 的項目。

3。 cookie.js：超簡約選項

GitHub 星數：1.8k

每週下載量：500k

概述

cookie.js 通過非常基本的 API 優先考慮簡單性。對於需要基本 cookie 管理而無需額外功能的開發人員來說，它是理想的選擇。

主要功能

沒有外部依賴。
支持命名空間以防止衝突。
可選的 JSON 支持。

安裝

<code>// Set a cookie  
Cookies.set('user', 'Alice', { expires: 7, secure: true });  

// Get a cookie  
const user = Cookies.get('user'); // "Alice"  

// Remove a cookie  
Cookies.remove('user');  

// Store JSON data  
Cookies.set('preferences', { theme: 'dark', notifications: true });  
const prefs = Cookies.getJSON('preferences'); // { theme: 'dark', ... }  </code>

登入後複製

使用示例

<code>npm install universal-cookie  </code>

登入後複製

優點

極其輕量級 (1.3 KB)。
適用於 CDN 和快速原型設計。

缺點

高級功能有限。

最適合

小型項目和靜態網站。

4。 Vue Cookie：為 Vue.js 構建

GitHub 星數：1.2k

每週下載量：300k

概述

vue-cookies 專為 Vue.js 應用程序設計，提供與 Vue 組件生命週期集成的反應式 cookie 管理。

主要功能

兼容 Vue 2 和 3。
反應式 cookie 綁定。
TypeScript 支持。

安裝

<code>import { useCookies } from 'react-cookie';  

function App() {  
  const [cookies, setCookie] = useCookies(['user']);  

  const login = () => {  
    setCookie('user', 'Bob', { path: '/', maxAge: 3600 });  
  };  

  return <div>User: {cookies.user}</div>;  
}  </code>

登入後複製

Vue 組件中的使用

<code></code>

登入後複製

優點

無縫 Vue 集成。
支持人類可讀的過期時間（例如“1d”、“2h”）。

缺點

在 Vue.js 項目之外不太有用。

最適合

Vue.js SPA 和儀表板。

5。 ough-cookie：服務器端專業知識

GitHub 星數：1.1k

每週下載量：1500 萬次

概述

tough-cookie 是一個強大的 Node.js 庫，用於在服務器端解析、存儲和管理 cookie。它由 request 和 axios 等庫內部使用。

主要功能

符合 RFC 6265 的解析。
多個域的 Cookie jar 管理。
模仿瀏覽器 cookie 行為。

安裝

<code>// Set a cookie  
cookie.set('lang', 'en', { domain: 'example.com', expires: 365 });  

// Get all cookies  
const allCookies = cookie.all();  

// Remove a cookie with options  
cookie.remove('lang', { domain: 'example.com' });  </code>

登入後複製

與 Axios 一起使用

<code>npm install js-cookie  </code>

登入後複製

優勢

企業級應用程序的高可靠性。
>非常適合Web刮板和API客戶端。

缺點

對於簡單瀏覽器應用程序而言並不是必需的。

>最適合>

node.js後端和自動化腳本。

比較表

Library	Size	Browser Support	Node.js Support	Framework Integration
js-cookie	2 KB	✅	✅	None
universal-cookie	5 KB	✅	✅	React, Next.js
cookie.js	1.3 KB	✅	❌	None
vue-cookies	3 KB	✅	❌	Vue 2/3
tough-cookie	15 KB	❌	✅	Axios, Request

------