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.
In this article
Instance methods
CookieStore.delete()The
delete()method deletes a cookie with the givennameoroptionsobject.It returns aPromisethat resolves when the deletion completes or if no cookies are matched.CookieStore.get()The
get()method gets a single cookie with the givennameoroptionsobject.It returns aPromisethat resolves with details of a single cookie.CookieStore.getAll()The
getAll()method gets all matching cookies.It returns aPromisethat resolves with a list of cookies.CookieStore.set()The
set()method sets a cookie with the givennameandvalueoroptionsobject.It returns aPromisethat resolves when the cookie is set.
Events
changeThe
changeevent 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.
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.
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.
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> |