update and fix to Cookie Store API

files/en-us/web/api/cookie_store_api/index.md

@@ -4,31 +4,47 @@ slug: Web/API/Cookie_Store_API
 page-type: web-api-overview
 status:
   - experimental
-browser-compat: api.CookieStore
+browser-compat:
+  - api.CookieChangeEvent
+  - api.CookieStore
+  - api.CookieStoreManager
+  - api.ExtendableCookieChangeEvent
+spec-urls: https://wicg.github.io/cookie-store/
 ---
 
 {{securecontext_header}}{{DefaultAPISidebar("Cookie Store API")}}{{SeeCompatTable}}
 
-The _**Cookie Store API**_ provides an asynchronous API for managing cookies, while also exposing cookies to [Service Worker API](/en-US/docs/Web/API/Service_Worker_API),
+The _**Cookie Store API**_ provides an asynchronous API for managing cookies, while also exposing cookies to {{domxref("Service Worker API", "", "", "nocode")}}.
 
 ## Concepts and Usage
 
 The existing method of getting and setting cookies involves working with {{domxref("document.cookie")}} as a string of key/value pairs. In addition to this being cumbersome and error prone, it also has a host of issues in the context of modern web development.
 
-The `document.cookie` interface is {{Glossary("synchronous")}}, single-threaded, and blocking. When writing a cookie you must wait for the browser to update the string of all cookies. In addition, the reliance on {{domxref("document")}} means that cookies cannot be accessed by service workers which cannot access the `document` object.
+The `document.cookie` interface is {{Glossary("synchronous")}}, single-threaded, and blocking. When writing a cookie you must wait for the browser to update the string of all cookies. In addition, the reliance on {{domxref("document")}} means that cookies cannot be accessed by service workers which cannot access the {{domxref("document")}} object.
 
 The _Cookie Store API_ provides an updated method of managing cookies. It is {{Glossary("asynchronous")}} and promise-based, therefore does not block the event loop. It does not rely on {{domxref("document")}} and so is available to service workers. The methods for getting and setting cookies also provide more feedback by way of error messages. This means that web developers do not have to set then immediately read back a cookie to check that setting was successful.
 
 ## Interfaces
 
-- {{domxref("CookieStore")}}
+- {{domxref("CookieChangeEvent")}} {{Experimental_Inline}}
+  - : A `CookieChangeEvent` named `change` is dispatched against `CookieStore` object in {{domxref("Window")}} context when any script-visible cookies changes occur.
+- {{domxref("CookieStore")}} {{Experimental_Inline}}
   - : The `CookieStore` interface enables getting and setting cookies.
-- {{domxref("CookieStoreManager")}}
+- {{domxref("CookieStoreManager")}} {{Experimental_Inline}}
   - : The `CookieStoreManager` interface provides a service worker registration to enable service workers to subscribe to cookie change events.
-- {{domxref("CookieChangeEvent")}}
-  - : A `CookieChangeEvent` named `change` is dispatched against `CookieStore` objects in {{domxref("Window")}} contexts when any script-visible cookies changes occur.
-- {{domxref("ExtendableCookieChangeEvent")}}
-  - : An `ExtendableCookieChangeEvent` named `change` is dispatched against {{domxref("ServiceWorkerGlobalScope")}} events when any script-visible cookie changes occur that match the service worker's cookie change subscription list.
+- {{domxref("ExtendableCookieChangeEvent")}} {{Experimental_Inline}}
+  - : An `ExtendableCookieChangeEvent` named `cookiechange` is dispatched against {{domxref("ServiceWorkerGlobalScope")}} context when any script-visible cookie changes occur that match the service worker's cookie change subscription list.
+
+## Extensions to other interfaces
+
+- {{domxref("ServiceWorkerGlobalScope.cookieStore")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : Returns a reference to the {{domxref("CookieStore")}} object associated with the service worker.
+- {{domxref("ServiceWorkerGlobalScope/cookiechange_event", "cookiechange")}} {{Experimental_Inline}}
+  - : Fired when any cookie changes have occurred which match the Service Worker's cookie change subscription list added via {{domxref("CookieStoreManager.subscribe()")}}.
+- {{domxref("ServiceWorkerRegistration.cookies")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : Returns a reference to the {{domxref("CookieStoreManager")}} interface, which allows subscribe and unsubscribe to cookie change events.
+- {{domxref("Window.cookieStore")}} {{ReadOnlyInline}} {{Experimental_Inline}}
+  - : Returns a reference to the {{domxref("CookieStore")}} object for the current document context.
 
 ## Specifications
 

files/en-us/web/api/cookiechangeevent/changed/index.md

@@ -25,7 +25,7 @@ An array of objects containing the changed cookie(s). Each object contains the f
 - `path`
   - : A string containing the path of the cookie.
 - `expires`
-  - : A timestamp, given as [Unix time](/en-US/docs/Glossary/Unix_time) in milliseconds, containing the expiration date of the cookie.
+  - : A timestamp, given as {{glossary("Unix time")}} in milliseconds, containing the expiration date of the cookie.
 - `secure`
   - : A {{jsxref("boolean")}} indicating whether the cookie is from a site with a secure context (HTTPS rather than HTTP).
 - `sameSite`
@@ -39,17 +39,21 @@ An array of objects containing the changed cookie(s). Each object contains the f
     - `"none"`
       - : Cookies will be sent in all contexts.
 
+- `partitioned`
+  - : A boolean indicating whether the cookie is a partitioned cookie (`true`) or not (`false`). See [Cookies Having Independent Partitioned State (CHIPS)](/en-US/docs/Web/Privacy/Partitioned_cookies) for more information.
+
 ## Examples
 
-In this example when the cookie is set, the event listener logs the `changed` property to the console. The first item in that array contains an object representing the cookie that has just been set.
+In this example, when the cookie is set, the event listener logs the `changed` property to the console. The first item in that array contains an object representing the cookie that has just been set.
 
 ```js
-cookieStore.addEventListener("change", (event) => {
+window.cookieStore.addEventListener("change", (event) => {
   console.log(event.changed[0]);
 });
 
 const one_day = 24 * 60 * 60 * 1000;
-cookieStore.set({
+
+window.cookieStore.set({
   name: "cookie1",
   value: "cookie1-value",
   expires: Date.now() + one_day,

files/en-us/web/api/cookiechangeevent/cookiechangeevent/index.md

@@ -11,7 +11,7 @@ browser-compat: api.CookieChangeEvent.CookieChangeEvent
 {{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
 
 The **`CookieChangeEvent()`** constructor creates a new {{domxref("CookieChangeEvent")}} object
-which is the event type passed to {{domxref("CookieStore/change_event", "CookieStore.onchange()")}}.
+which is the event type passed to {{domxref("CookieStore/change_event", "change")}} event.
 This constructor is called by the browser when a change event occurs.
 
 > **Note:** This event constructor is generally not needed for production websites. It's primary use is for tests that require an instance of this event.
@@ -26,13 +26,12 @@ new CookieChangeEvent(type, options)
 ### Parameters
 
 - `type`
-  - : A string with the name of the event.
-    It is case-sensitive and browsers always set it to `cookiechange`.
+  - : A string with the name of the event. It is case-sensitive and browsers always set it to `change`.
 - `options` {{Optional_Inline}}
   - : An object that, _in addition of the properties defined in {{domxref("Event/Event", "Event()")}}_, can have the following properties:
-    - `changed`
+    - `changed` {{Optional_Inline}}
       - : An array containing the changed cookies.
-    - `deleted`
+    - `deleted` {{Optional_Inline}}
       - : An array containing the deleted cookies.
 
 ### Return value

files/en-us/web/api/cookiechangeevent/deleted/index.md

@@ -25,7 +25,7 @@ An array of objects containing the deleted cookie(s). Each object contains the f
 - `path`
   - : A string containing the path of the cookie.
 - `expires`
-  - : A timestamp, given as [Unix time](/en-US/docs/Glossary/Unix_time) in milliseconds, containing the expiration date of the cookie.
+  - : A timestamp, given as {{glossary("Unix time")}} in milliseconds, containing the expiration date of the cookie.
 - `secure`
   - : A {{jsxref("boolean")}} indicating whether the cookie is from a site with a secure context (HTTPS rather than HTTP).
 - `sameSite`
@@ -39,12 +39,15 @@ An array of objects containing the deleted cookie(s). Each object contains the f
     - `"none"`
       - : Cookies will be sent in all contexts.
 
+- `partitioned`
+  - : A boolean indicating whether the cookie is a partitioned cookie (`true`) or not (`false`). See [Cookies Having Independent Partitioned State (CHIPS)](/en-US/docs/Web/Privacy/Partitioned_cookies) for more information.
+
 ## Examples
 
-In this example when the cookie is deleted the event listener logs the first item in the `CookieChangeEvent.deleted` property to the console. It contains an object representing the cookie that has just been deleted.
+In this example, when the cookie is deleted, the event listener logs the first item in the `CookieChangeEvent.deleted` property to the console. It contains an object representing the cookie that has just been deleted.
 
 ```js
-cookieStore.addEventListener("change", (event) => {
+window.cookieStore.addEventListener("change", (event) => {
   console.log(event.deleted[0]);
 });
 ```

files/en-us/web/api/cookiechangeevent/index.md

@@ -9,12 +9,12 @@ browser-compat: api.CookieChangeEvent
 
 {{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
 
-The **`CookieChangeEvent`** interface of the ['Cookie Store API'](/en-US/docs/Web/API/Cookie_Store_API) is the event type of the {{domxref("CookieStore.change_event", "change")}} event fired at a {{domxref("CookieStore")}} when any cookie changes occur. A cookie change consists of a cookie and a type (either "changed" or "deleted").
+The **`CookieChangeEvent`** interface of the {{domxref("Cookie Store API", "", "", "nocode")}} is the event type passed to {{domxref("CookieStore.change_event", "change")}} event fired at the {{domxref("CookieStore")}} when any cookie changes occur. A cookie change consists of a cookie and a type (either "changed" or "deleted").
 
 Cookie changes that will cause the `CookieChangeEvent` to be dispatched are:
 
 - A cookie is newly created and not immediately removed. In this case `type` is "changed".
-- A cookie is newly created and immediately removed. In this case `type` is "deleted"
+- A cookie is newly created and immediately removed. In this case `type` is "deleted".
 - A cookie is removed. In this case `type` is "deleted".
 
 > **Note:** A cookie that is replaced due to the insertion of another cookie with the same name, domain, and path, is ignored and does not trigger a change event.
@@ -35,17 +35,22 @@ _This interface also inherits properties from {{domxref("Event")}}._
 - {{domxref("CookieChangeEvent.deleted")}} {{ReadOnlyInline}} {{Experimental_Inline}}
   - : Returns an array containing one or more deleted cookies.
 
+## Instance methods
+
+_This interface also inherits methods from {{domxref("Event")}}._
+
 ## Examples
 
 In this example when the cookie is set, the event listener logs the event to the console. This is a `CookieChangeEvent` object with the {{domxref("CookieChangeEvent.changed","changed")}} property containing an object representing the cookie that has just been set.
 
 ```js
-cookieStore.addEventListener("change", (event) => {
+window.cookieStore.addEventListener("change", (event) => {
   console.log(event);
 });
 
 const one_day = 24 * 60 * 60 * 1000;
-cookieStore.set({
+
+window.cookieStore.set({
   name: "cookie1",
   value: "cookie1-value",
   expires: Date.now() + one_day,

files/en-us/web/api/cookiestore/change_event/index.md

@@ -22,20 +22,26 @@ cookieStore.addEventListener("change", (event) => { })
 cookieStore.onchange = (event) => { }
 ```
 
+## Event type
+
+A {{domxref("CookieChangeEvent")}}. Inherits from {{domxref("Event")}}.
+
+{{InheritanceDiagram("CookieChangeEvent")}}
+
 ## Examples
 
-To be informed when a cookie has changed, you can add a handler to the `cookieStore` instance using {{domxref("EventTarget.addEventListener", "addEventListener()")}}, like this:
+To be informed when a cookie has changed, you can add a handler to the `CookieStore` instance using {{domxref("EventTarget.addEventListener", "addEventListener()")}}, like this:
 
 ```js
-cookieStore.addEventListener("change", (event) => {
+window.cookieStore.addEventListener("change", (event) => {
   console.log("1 change event");
 });
 ```
 
 Alternatively, you can use the `CookieStore.onchange` event handler property to establish a handler for the `change` event:
 
 ```js
-cookieStore.onchange = (event) => {
+window.cookieStore.onchange = (event) => {
   console.log("1 change event");
 };
 ```

files/en-us/web/api/cookiestore/delete/index.md

@@ -8,7 +8,7 @@ status:
 browser-compat: api.CookieStore.delete
 ---
 
-{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}{{AvailableInWorkers}}
 
 The **`delete()`** method of the {{domxref("CookieStore")}} interface deletes a cookie with the given name or options object. The `delete()` method expires the cookie by changing the date to one in the past.
 
@@ -23,23 +23,23 @@ delete(options)
 
 This method requires one of the following:
 
-- `name`
+- `name` {{optional_inline}}
   - : A string with the name of a cookie.
 
 Or
 
-- `options`
+- `options` {{optional_inline}}
 
   - : An object containing:
 
     - `name`
       - : A string with the name of a cookie.
+    - `domain` {{Optional_Inline}}
+      - : A string with the URL of a cookie. Defaults to `null`.
+    - `path` {{Optional_Inline}}
+      - : A string containing a path. Defaults to `/`.
     - `partitioned` {{Optional_Inline}}
       - : A boolean value that defaults to `false`. Setting it to `true` specifies that the cookie to delete will be a partitioned cookie. See [Cookies Having Independent Partitioned State (CHIPS)](/en-US/docs/Web/Privacy/Partitioned_cookies) for more information.
-    - `path` {{Optional_Inline}}
-      - : A string containing a path.
-    - `url` {{Optional_Inline}}
-      - : A string with the URL of a cookie.
 
 > **Note:** The `url` option enables the modification of a cookie scoped under a particular URL. Service workers can obtain cookies that would be sent to any URL under their scope. From a document you may only obtain the cookies at the current URL, so the only valid URL in a document context is the document's URL.
 
@@ -49,15 +49,18 @@ A {{jsxref("Promise")}} that resolves with {{jsxref("undefined")}} when deletion
 
 ### Exceptions
 
+- `SecurityError` {{domxref("DOMException")}}
+  - : Thrown if the origin can not {{glossary("Serialization", "serialize")}} to a URL.
 - {{jsxref("TypeError")}}
   - : Thrown if deleting the cookie represented by the given `name` or `options` fails.
 
 ## Examples
 
-In this example a cookie is deleted by passing the name to the `delete()` method.
+In this example, a cookie is deleted by passing the name to the `delete()` method.
 
 ```js
-let result = cookieStore.delete("cookie1");
+let result = window.cookieStore.delete("cookie1");
+
 console.log(result);
 ```
 

files/en-us/web/api/cookiestore/get/index.md

@@ -8,7 +8,7 @@ status:
 browser-compat: api.CookieStore.get
 ---
 
-{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}{{AvailableInWorkers}}
 
 The **`get()`** method of the {{domxref("CookieStore")}} interface returns a single cookie with the given name or options object. The method will return the first matching cookie for the passed parameters.
 
@@ -23,12 +23,12 @@ get(options)
 
 This method requires one of the following:
 
-- `name`
+- `name` {{optional_inline}}
   - : A string with the name of a cookie.
 
 Or
 
-- `options`
+- `options` {{optional_inline}}
 
   - : An object containing:
 
@@ -49,7 +49,7 @@ A {{jsxref("Promise")}} that resolves with an object representing the first cook
 
 - `expires`
 
-  - : A timestamp, given as [Unix time](/en-US/docs/Glossary/Unix_time) in milliseconds, containing the expiration date of the cookie.
+  - : A timestamp, given as {{glossary("Unix time")}} in milliseconds, containing the expiration date of the cookie.
 
 - `name`
 
@@ -83,15 +83,22 @@ A {{jsxref("Promise")}} that resolves with an object representing the first cook
 
 ### Exceptions
 
+- `SecurityError` {{domxref("DOMException")}}
+  - : Thrown if the origin does not {{glossary("Serialization", "serialize")}} to a URL.
 - {{jsxref("TypeError")}}
-  - : Thrown if getting the cookie represented by the given `name` or `options` fails.
+  - : Thrown if:
+    - The passing `options` is an empty object.
+    - The `url` in `options` is present and is not equal with the creation URL if in Window context.
+    - The `url` in `options` is present and its origin is same as the origin of the creation URL.
+    - Getting the cookie or cookies represented by the given `name` or `options` fails.
 
 ## Examples
 
-In this example we return a cookie named "cookie1". If the cookie is found the result of the Promise is an object containing the details of a single cookie.
+In this example, we return a cookie named "cookie1". If the cookie is found the result of the Promise is an object containing the details of a single cookie.
 
 ```js
-let cookie = cookieStore.get("cookie1");
+let cookie = await window.cookieStore.get("cookie1");
+
 if (cookie) {
   console.log(cookie);
 } else {

files/en-us/web/api/cookiestore/getall/index.md

@@ -8,7 +8,7 @@ status:
 browser-compat: api.CookieStore.getAll
 ---
 
-{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}{{AvailableInWorkers}}
 
 The **`getAll()`** method of the {{domxref("CookieStore")}} interface returns a list of cookies that match the name or options passed to it. Passing no parameters will return all cookies for the current context.
 
@@ -49,7 +49,7 @@ Each object contains the following properties:
 
 - `expires`
 
-  - : A timestamp, given as [Unix time](/en-US/docs/Glossary/Unix_time) in milliseconds, containing the expiration date of the cookie.
+  - : A timestamp, given as {{glossary("Unix time")}} in milliseconds, containing the expiration date of the cookie.
 
 - `name`
 
@@ -83,16 +83,22 @@ Each object contains the following properties:
 
 ### Exceptions
 
+- `SecurityError` {{domxref("DOMException")}}
+  - : Thrown if the origin does not {{glossary("Serialization", "serialize")}} to a URL.
 - {{jsxref("TypeError")}}
-  - : Thrown if getting the cookie or cookies represented by the given `name` or `options` fails.
+  - : Thrown if:
+    - The `url` member of `options` parameter is present and is not equal with the creation URL if in Window context.
+    - The `url` member of `options` parameter is present and its origin is same as the origin of the creation URL.
+    - Getting the cookie or cookies represented by the given `name` or `options` fails.
 
 ## Examples
 
-In this example we use `getAll()` with no parameters. This returns all of the cookies for this context as an array of objects.
+In this example, we use `getAll()` with no parameters. This returns all of the cookies for this context as an array of objects.
 
 ```js
-let cookies = await cookieStore.getAll();
-if (cookies) {
+let cookies = await window.cookieStore.getAll();
+
+if (cookies.length > 0) {
   console.log(cookies);
 } else {
   console.log("Cookie not found");

files/en-us/web/api/cookiestore/index.md

@@ -7,9 +7,9 @@ status:
 browser-compat: api.CookieStore
 ---
 
-{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}
+{{securecontext_header}}{{APIRef("Cookie Store API")}}{{SeeCompatTable}}{{AvailableInWorkers}}
 
-The **`CookieStore`** interface of the ['Cookie Store API'](/en-US/docs/Web/API/Cookie_Store_API) provides methods for getting and setting cookies asynchronously from either a page or a service worker.
+The **`CookieStore`** interface of the {{domxref("Cookie Store API", "", "", "nocode")}} provides methods for getting and setting cookies asynchronously from either a page or a service worker.
 
 The `CookieStore` is accessed via attributes in the global scope in a {{domxref("Window")}} or {{domxref("ServiceWorkerGlobalScope")}} context. Therefore there is no constructor.
 
@@ -37,7 +37,8 @@ In this example we set a cookie and write to the console feedback as to whether
 
 ```js
 const day = 24 * 60 * 60 * 1000;
-cookieStore
+
+window.cookieStore
   .set({
     name: "cookie1",
     value: "cookie1-value",