---
title: "useCookie 用法與示例"
description: "有助於在 CookieStore 中存儲、更新和刪除值的 hook。"
canonical: https://reactuse.com/zh-Hant/state/usecookie/
---

# useCookie

有助於在 CookieStore 中存儲、更新和刪除值的 hook

:::note
當你在多個組件中使用相同鍵的 useCookie hook 並使用 setCookieValue 時，它不會觸發其他使用此 hook 的組件進行更新。

如果你想要一個廣播效果，可以參考以下鏈接：https://github.com/childrentime/reactuse/issues/91
:::


`useCookie` 提供響應式的瀏覽器 cookie 讀寫。它回傳一個元組，包含當前 cookie 值（或 `null`）和一個更新 cookie 的函式。支援設定 cookie 的各種屬性（過期時間、路徑、域名、安全性等）。刪除 cookie 可透過將值設為 `null` 或 `undefined`。

### 使用場景

- 讀取和寫入使用者偏好設定到 cookie
- 管理認證 token 或工作階段資訊
- 建構需要 cookie 存取的同意管理或功能旗標系統

### 注意事項

- **SSR 安全**：在伺服器端渲染時回傳 `null`。伺服器上不會存取 `document.cookie`。
- **Cookie 屬性**：支援所有標準 cookie 屬性，包括 `expires`、`path`、`domain`、`secure`、`sameSite` 和 `httpOnly`。
- **相關 hooks**：另請參閱 `useLocalStorage` 和 `useSessionStorage` 用於 Web Storage API 的替代持久化方案。

## Usage

```tsx live
function Demo() {
    const defaultOption = {
    path: "/",
  };
  const cookieName = "cookie-key";
  const [cookieValue, updateCookie, refreshCookie] = useCookie(
    cookieName,
    defaultOption,
    "default-value",
  );

  const updateButtonClick = () => {
    updateCookie("new-cookie-value");
  };

  const deleteButtonClick = () => {
    updateCookie(undefined);
  };

  const change = () => {
    if ("cookieStore" in window) {
      const store = window.cookieStore as any;
      store.set({ name: cookieName, value: "changed" });
    }
    else {
      document.cookie = `${cookieName}=changed; path=/`;
    }
  };

  return (
    <div>
      <p>點擊按鈕以更新或清除 cookie</p>
      <p color="blue">cookie：{cookieValue || "無值"}</p>
      <button onClick={updateButtonClick}>更新 cookie</button>
      <button onClick={deleteButtonClick}>清除 cookie</button>
      <button onClick={change}>
        通過其他方法更改 cookie
      </button>
      <button onClick={refreshCookie}>刷新 cookie</button>
    </div>
  );
}

```

%%API%%