Cookie Store API Tester - Online Async Cookie Read/Write

The Cookie Store API is a modern JavaScript API that provides an asynchronous, Promise-based interface for reading and writing cookies. Unlike the traditional document.cookie getter/setter, it offers methods like cookieStore.set(), cookieStore.get(), cookieStore.getAll(), and cookieStore.delete(), plus a change event for real-time monitoring. It's designed to be easier to use, more performant, and works in Service Workers.

As of 2024, the Cookie Store API is supported in Google Chrome 87+, Microsoft Edge 87+, and Opera 73+. It is not yet supported in Firefox or Safari. The API requires a secure context (HTTPS or localhost). This tool automatically detects if the API is available and falls back to document.cookie when needed, though change monitoring is only available with the native Cookie Store API.

Key differences:
• Async vs Sync: Cookie Store uses Promises; document.cookie is synchronous and blocking.
• Structured Data: Cookie Store returns parsed cookie objects with all attributes; document.cookie returns a raw string.
• Change Events: Cookie Store emits change events; document.cookie has no notification mechanism.
• Service Workers: Cookie Store works in Service Workers; document.cookie does not.
• Ergonomics: No manual string parsing or encoding needed with Cookie Store.

SameSite controls when cookies are sent with cross-site requests:
• Lax (default): Cookies are sent with top-level navigations (e.g., clicking a link) but not with cross-site subrequests (images, iframes). Best balance of security and usability.
• Strict: Cookies are never sent with cross-site requests. Maximum CSRF protection but may break some user flows.
• None: Cookies are sent with all cross-site requests. Must be paired with Secure=true. Required for third-party cookies and cross-site integrations.

The Cookie Store API is only available in secure contexts (pages served over HTTPS or on localhost). This is a security requirement to prevent malicious actors from easily manipulating cookies via scripts on insecure connections. For local development, localhost and 127.0.0.1 are considered secure contexts. If you're on HTTP, this tool gracefully falls back to document.cookie for basic operations.

You can listen for cookie changes using cookieStore.addEventListener('change', callback). The event object contains two arrays: event.changed (cookies that were set or modified) and event.deleted (cookies that were removed). Each entry is a full cookie object with name, value, domain, path, secure, sameSite, and expires properties. This is incredibly useful for syncing cookie state across tabs or reacting to auth changes in real time.

Yes! This is one of the biggest advantages of the Cookie Store API. Service Workers cannot access document.cookie because they don't have access to the DOM. The Cookie Store API provides a clean, async interface that works perfectly in Service Worker contexts, enabling cookie-based logic in network request interception, background sync, and push notification scenarios.