1. Web
  2. Web API
  3. CookieStore

CookieStore

Baseline 2025 *
Newly available

Since June 2025, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Some parts of this feature may have varying levels of support.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Note: This feature is available in Service Workers.

Giao diện CookieStore của Cookie Store API cung cấp các phương thức để lấy và đặt cookie một cách bất đồng bộ từ trang hoặc service worker.

CookieStore được truy cập thông qua các thuộc tính trong phạm vi toàn cục ở ngữ cảnh Window hoặc ServiceWorkerGlobalScope. Vì vậy không có hàm khởi tạo nào.

EventTarget CookieStore

Phương thức thể hiện

CookieStore.delete()

Phương thức delete() xóa một cookie khớp với name hoặc đối tượng options đã cho. Nó trả về một Promise được giải quyết khi việc xóa hoàn tất hoặc khi không có cookie nào khớp.

CookieStore.get()

Phương thức get() lấy một cookie duy nhất khớp với name hoặc đối tượng options đã cho. Nó trả về một Promise được giải quyết với thông tin của một cookie duy nhất.

CookieStore.getAll()

Phương thức getAll() lấy tất cả cookie phù hợp. Nó trả về một Promise được giải quyết với một danh sách cookie.

CookieStore.set()

Phương thức set() đặt một cookie với name và value hoặc đối tượng options đã cho. Nó trả về một Promise được giải quyết khi cookie được đặt xong.

Sự kiện

change

Sự kiện change được kích hoạt khi có thay đổi đối với bất kỳ cookie nào.

Ví dụ

Các ví dụ dưới đây có thể được kiểm tra bằng cách sao chép mã vào một test harness rồi chạy với máy chủ cục bộ, hoặc triển khai lên một website như GitHub Pages.

Ví dụ này cho thấy cách đặt cookie bằng cách truyền name và value, cũng như bằng cách đặt giá trị options.

Phương thức cookieTest() đặt một cookie với các thuộc tính name và value, và một cookie khác với các thuộc tính name, value, và expires. Sau đó chúng ta dùng phương thức CookieStore.get() để lấy từng cookie, rồi ghi chúng ra log.

js
async function cookieTest() {
  // Set cookie: passing name and value
  try {
    await cookieStore.set("cookie1", "cookie1-value");
  } catch (error) {
    console.log(`Error setting cookie1: ${error}`);
  }

  // Set cookie: passing options
  const day = 24 * 60 * 60 * 1000;

  try {
    await cookieStore.set({
      name: "cookie2",
      value: "cookie2-value",
      expires: Date.now() + day,
      partitioned: true,
    });
  } catch (error) {
    log(`Error setting cookie2: ${error}`);
  }

  // Get named cookies and log their properties
  const cookie1 = await cookieStore.get("cookie1");
  console.log(cookie1);

  const cookie2 = await cookieStore.get("cookie2");
  console.log(cookie2);
}

cookieTest();

Note: Trong các trình duyệt hỗ trợ, bạn có thể đặt thời hạn hết hạn của cookie bằng maxAge thay cho expires.

Ví dụ này cho thấy cách bạn có thể lấy một cookie cụ thể bằng CookieStore.get() hoặc lấy tất cả cookie bằng CookieStore.getAll().

Mã ví dụ trước tiên đặt ba cookie để dùng minh họa cho các phương thức lấy. Đầu tiên, nó tạo cookie1 và cookie2 bằng phương thức CookieStore.set(). Sau đó, nó tạo cookie thứ ba bằng thuộc tính đồng bộ cũ hơn Document.cookie để cho thấy rằng các cookie này cũng được lấy bởi các phương thức get() và getAll().

Sau đó, đoạn mã dùng CookieStore.get() để lấy "cookie1" và ghi các thuộc tính của nó ra log, và dùng CookieStore.getAll() (không có đối số) để lấy toàn bộ cookie trong ngữ cảnh hiện tại.

js
async function cookieTest() {
  // Set a cookie passing name and value
  try {
    await cookieStore.set("cookie1", "cookie1-value");
  } catch (error) {
    console.log(`Error setting cookie1: ${error}`);
  }

  // Set a cookie passing an options object
  const day = 24 * 60 * 60 * 1000;
  try {
    await cookieStore.set({
      name: "cookie2",
      value: `cookie2-value`,
      expires: Date.now() + day,
      partitioned: true,
    });
  } catch (error) {
    console.log(`Error setting cookie2: ${error}`);
  }

  // Set cookie using document.cookie
  // (to demonstrate these are are fetched too)
  document.cookie = "favorite_food=tripe; SameSite=None; Secure";

  // Get named cookie and log properties
  const cookie1 = await cookieStore.get("cookie1");
  console.log(cookie1);

  // Get all cookies and log each
  const cookies = await cookieStore.getAll();
  if (cookies.length > 0) {
    console.log(`getAll(): ${cookies.length}:`);
    cookies.forEach((cookie) => console.log(cookie));
  } else {
    console.log("Cookies not found");
  }
}

cookieTest();

Ví dụ này sẽ ghi riêng "cookie1" và cả ba cookie. Một điều cần lưu ý là cookie được tạo bằng Document.cookie có thể có đường dẫn khác với các cookie được tạo bằng set() (mặc định là /).

Ví dụ này cho thấy cách xóa một cookie theo tên bằng phương thức delete().

Đoạn mã đầu tiên đặt hai cookie và ghi chúng ra console. Sau đó chúng ta xóa một trong các cookie, rồi liệt kê lại toàn bộ cookie. Cookie đã bị xóa ("cookie1") có trong mảng log đầu tiên, nhưng không còn trong mảng thứ hai.

js
async function cookieTest() {
  // Set two cookies
  try {
    await cookieStore.set("cookie1", "cookie1-value");
  } catch (error) {
    console.log(`Error setting cookie1: ${error}`);
  }

  try {
    await cookieStore.set("cookie2", "cookie2-value");
  } catch (error) {
    console.log(`Error setting cookie2: ${error}`);
  }

  // Log cookie names
  let cookieNames = (await cookieStore.getAll())
    .map((cookie) => cookie.name)
    .join(" ");
  console.log(`Initial cookies: ${cookieNames}`);

  // Delete cookie1
  await cookieStore.delete("cookie1");

  // Log cookies again (to show cookie1 deleted)
  cookieNames = (await cookieStore.getAll())
    .map((cookie) => cookie.name)
    .join(" ");
  console.log(
    `Cookies remaining after attempted deletions (cookie1 should be deleted): ${cookieNames}`,
  );
}

cookieTest();

Thông số kỹ thuật

Specification
Cookie Store API
# CookieStore

Tương thích trình duyệt

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content