Movatterモバイル変換


[0]ホーム

URL:


  1. Web
  2. Web APIs
  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 insecure contexts (HTTPS), in some or allsupporting browsers.

Note: This feature is available inService Workers.

TheCookieStore interface of theCookie Store API provides methods for getting and setting cookies asynchronously from either a page or a service worker.

TheCookieStore is accessed via attributes in the global scope in aWindow orServiceWorkerGlobalScope context. Therefore there is no constructor.

EventTarget CookieStore

Instance methods

CookieStore.delete()

Thedelete() method deletes a cookie with the givenname oroptions object.It returns aPromise that resolves when the deletion completes or if no cookies are matched.

CookieStore.get()

Theget() method gets a single cookie with the givenname oroptions object.It returns aPromise that resolves with details of a single cookie.

CookieStore.getAll()

ThegetAll() method gets all matching cookies.It returns aPromise that resolves with a list of cookies.

CookieStore.set()

Theset() method sets a cookie with the givenname andvalue oroptions object.It returns aPromise that resolves when the cookie is set.

Events

change

Thechange event fires when a change is made to any cookie.

Examples

The examples below can be tested by copying the code into a test harness and running it with alocal server, or deploying it to a website site such as GitHub pages.

Setting cookies

This example shows how to set cookies by passing aname andvalue, and by setting anoptions value.

ThecookieTest() method sets one cookie withname andvalue properties and another withname,value, andexpires properties.We then use theCookieStore.get() method to get each of the cookies, which are then logged.

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();

Getting cookies

This example shows how you can get a particular cookie usingCookieStore.get() or all cookies usingCookieStore.getAll().

The example code first sets three cookies that we'll use for demonstrating the get methods.First it createscookie1 andcookie2 using theCookieStore.set() method.Then it creates a third cookie using the older synchronousDocument.cookie property (just so we can show that these are also fetched using theget() andgetAll() methods).

The code then usesCookieStore.get() to fetch "cookie1" and log its properties, andCookieStore.getAll() (without arguments) to fetch all cookies in the current context.

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();

The example should log "cookie1" and all three cookies separately.One thing to note is that the cookie created usingDocument.cookie may have a different path than those created usingset() (which defaults to/).

Delete a named cookie

This example shows how to delete a named cookie using thedelete() method.

The code first sets two cookies and logs them to the console.We then delete one of the cookies, and then list all cookies again.The deleted cookie ("cookie1") is present in the first log array, and not in the second.

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();

Specifications

Specification
Cookie Store API
# CookieStore

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on byMDN contributors.


[8]ページ先頭

©2009-2025 Movatter.jp