init StorageEvent documentation (#29760)

* init StorageEvent.StorageEvent * add additional link * init StorageEvent.url * init StorageEvent.storageArea * init StorageEvent.key * init StorageEvent.oldValue * init StorageEvent.newValue * fix action error * style pretty * style * Apply suggestions from code review Co-authored-by: wbamberg <[email protected]> * fix * update * update * update link * fix macros * update * text update * text update --------- Co-authored-by: wbamberg <[email protected]>
mdn · Nov 29, 2023 · cec2a00 · cec2a00
1 parent ca577ad
commit cec2a00
Show file tree

Hide file tree

Showing 9 changed files with 216 additions and 30 deletions.
diff --git a/files/en-us/web/api/storageevent/index.md b/files/en-us/web/api/storageevent/index.md
@@ -23,30 +23,27 @@ when a storage area the window has access to is changed within the context of an
 _In addition to the properties listed below, this interface inherits the properties of its parent interface, {{domxref("Event")}}._
 
 - {{domxref("StorageEvent.key", "key")}} {{ReadOnlyInline}}
-  - : Returns a string that represents the key changed.
-    The `key` attribute is [`null`](/en-US/docs/Web/JavaScript/Reference/Operators/null)
-    when the change is caused by the storage `clear()` method.
+  - : Returns a string with the key for the storage item that was changed.
+    The `key` attribute is `null` when the change is caused by the storage `clear()` method.
 - {{domxref("StorageEvent.newValue", "newValue")}} {{ReadOnlyInline}}
-  - : Returns a string with the new value of the `key`.
-    This value is `null`
-    when the change has been invoked by storage `clear()` method,
-    or the `key` has been removed from the storage.
+  - : Returns a string with the new value of the storage item that was changed.
+    This value is `null` when the change has been invoked by storage `clear()` method,
+    or the storage item has been removed from the storage.
 - {{domxref("StorageEvent.oldValue", "oldValue")}} {{ReadOnlyInline}}
-  - : Returns a string with the original value of the `key`.
-    This value is `null` when the `key` has been newly added
+  - : Returns a string with the original value of the storage item that was changed.
+    This value is `null` when the storage item has been newly added
     and therefore doesn't have any previous value.
 - {{domxref("StorageEvent.storageArea", "storageArea")}} {{ReadOnlyInline}}
-  - : Returns a {{DOMxRef("Storage")}} object that represents the storage that was affected.
+  - : Returns a {{DOMxRef("Storage")}} object that represents the storage object that was affected.
 - {{domxref("StorageEvent.url", "url")}} {{ReadOnlyInline}}
-  - : Returns string with the URL of the document whose `key` changed.
+  - : Returns string with the URL of the document whose storage changed.
 
 ## Instance methods
 
 _In addition to the methods listed below, this interface inherits the methods of its parent interface, {{domxref("Event")}}._
 
 - {{domxref("StorageEvent.initStorageEvent", "initStorageEvent()")}} {{deprecated_inline}}
-  - : Initializes the event in a manner analogous to the similarly-named {{domxref("Event.initEvent", "initEvent()")}} method in the DOM
-    Events interfaces. Use the constructor instead.
+  - : Initializes the event in a manner analogous to the similarly-named {{domxref("Event.initEvent", "initEvent()")}} method in the DOM Events interfaces. Use the constructor instead.
 
 ## Specifications
 
@@ -55,3 +52,7 @@ _In addition to the methods listed below, this interface inherits the methods of
 ## Browser compatibility
 
 {{Compat}}
+
+## See also
+
+- {{domxref("Web Storage API", "", "", "nocode")}}
diff --git a/files/en-us/web/api/storageevent/initstorageevent/index.md b/files/en-us/web/api/storageevent/initstorageevent/index.md
@@ -8,10 +8,9 @@ status:
 browser-compat: api.StorageEvent.initStorageEvent
 ---
 
-{{ ApiRef("Web Storage API") }}{{deprecated_header}}
+{{ApiRef("Web Storage API")}}{{deprecated_header}}
 
-The **`StorageEvent.initStorageEvent()`** method is used to initialize the
-value of a {{ domxref("StorageEvent") }}.
+The **`StorageEvent.initStorageEvent()`** method is used to initialize the value of a {{ domxref("StorageEvent") }}.
 
 ## Syntax
 
@@ -43,8 +42,7 @@ initStorageEvent(type, canBubble, cancelable, key, oldValue, newValue, url, stor
 - `url` {{optional_inline}}
   - : The URL of the document initiating the change.
 - `storageArea` {{optional_inline}}
-  - : The {{DOMxRef("Storage")}} object representing the storage area on which this event
-    occurred.
+  - : The {{DOMxRef("Storage")}} object representing the storage area on which this event occurred.
 
 ### Return value
 
@@ -60,5 +58,6 @@ None ({{jsxref("undefined")}}).
 
 ## See also
 
+- {{domxref("Web Storage API", "", "", "nocode")}}
 - The constructor to use instead of this deprecated method: {{domxref("StorageEvent.StorageEvent",
     "StorageEvent()")}}.
diff --git a/files/en-us/web/api/storageevent/key/index.md b/files/en-us/web/api/storageevent/key/index.md
@@ -0,0 +1,27 @@
+---
+title: "StorageEvent: key property"
+short-title: key
+slug: Web/API/StorageEvent/key
+page-type: web-api-instance-property
+browser-compat: api.StorageEvent.key
+---
+
+{{APIRef("Web Storage API")}}
+
+The **`key`** property of the {{domxref("StorageEvent")}} interface returns the key for the storage item that was changed.
+
+## Value
+
+A string containing the key for the storage item that was changed.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Web Storage API", "", "", "nocode")}}
diff --git a/files/en-us/web/api/storageevent/newvalue/index.md b/files/en-us/web/api/storageevent/newvalue/index.md
@@ -0,0 +1,27 @@
+---
+title: "StorageEvent: newValue property"
+short-title: newValue
+slug: Web/API/StorageEvent/newValue
+page-type: web-api-instance-property
+browser-compat: api.StorageEvent.newValue
+---
+
+{{APIRef("Web Storage API")}}
+
+The **`newValue`** property of the {{domxref("StorageEvent")}} interface returns the new value of the storage item whose value was changed.
+
+## Value
+
+A string containing the new value of the storage item.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Web Storage API", "", "", "nocode")}}
diff --git a/files/en-us/web/api/storageevent/oldvalue/index.md b/files/en-us/web/api/storageevent/oldvalue/index.md
@@ -0,0 +1,27 @@
+---
+title: "StorageEvent: oldValue property"
+short-title: oldValue
+slug: Web/API/StorageEvent/oldValue
+page-type: web-api-instance-property
+browser-compat: api.StorageEvent.oldValue
+---
+
+{{APIRef("Web Storage API")}}
+
+The **`oldValue`** property of the {{domxref("StorageEvent")}} interface returns the original value of the storage item whose value changed.
+
+## Value
+
+A string containing the original value of the storage item.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Web Storage API", "", "", "nocode")}}
diff --git a/files/en-us/web/api/storageevent/storagearea/index.md b/files/en-us/web/api/storageevent/storagearea/index.md
@@ -0,0 +1,27 @@
+---
+title: "StorageEvent: storageArea property"
+short-title: storageArea
+slug: Web/API/StorageEvent/storageArea
+page-type: web-api-instance-property
+browser-compat: api.StorageEvent.storageArea
+---
+
+{{APIRef("Web Storage API")}}
+
+The **`storageArea`** property of the {{domxref("StorageEvent")}} interface returns the storage object that was affected.
+
+## Value
+
+A {{DOMxRef("Storage")}} object that represents the storage object that was affected.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Web Storage API", "", "", "nocode")}}
diff --git a/files/en-us/web/api/storageevent/storageevent/index.md b/files/en-us/web/api/storageevent/storageevent/index.md
@@ -0,0 +1,51 @@
+---
+title: "StorageEvent: StorageEvent() constructor"
+short-title: StorageEvent()
+slug: Web/API/StorageEvent/StorageEvent
+page-type: web-api-constructor
+browser-compat: api.StorageEvent.StorageEvent
+---
+
+{{ApiRef("Web Storage API")}}
+
+The **`StorageEvent()`** constructor creates a new {{domxref("StorageEvent")}} object.
+
+## Syntax
+
+```js-nolint
+new StorageEvent(type)
+new StorageEvent(type, options)
+```
+
+### Parameters
+
+- `type`
+  - : A string with the name of the type of the `StorageEvent`. It is case-sensitive and browsers set it to `storage`.
+- `options` {{optional_inline}}
+  - : An object that, _in addition of the properties defined in {{domxref("Event/Event", "Event()")}}_, has the following properties:
+    - `key` {{optional_inline}}
+      - : A string that represents the key for the storage item that changed. Defaults to `null`.
+    - `oldValue` {{optional_inline}}
+      - : A string containing the original value of the storage item. Defaults to `null`.
+    - `newValue` {{optional_inline}}
+      - : A string with the new value of the `key`. Defaults to `null`.
+    - `url`
+      - : A string with the URL of the document whose storage changed.
+    - `storageArea` {{optional_inline}}
+      - : A {{DOMxRef("Storage")}} object that represents the storage that was affected. Defaults to `null`.
+
+### Return value
+
+A new {{domxref("StorageEvent")}} object.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Web Storage API", "", "", "nocode")}}
diff --git a/files/en-us/web/api/storageevent/url/index.md b/files/en-us/web/api/storageevent/url/index.md
@@ -0,0 +1,27 @@
+---
+title: "StorageEvent: url property"
+short-title: url
+slug: Web/API/StorageEvent/url
+page-type: web-api-instance-property
+browser-compat: api.StorageEvent.url
+---
+
+{{APIRef("Web Storage API")}}
+
+The **`url`** property of the {{domxref("StorageEvent")}} interface returns the URL of the document whose storage changed.
+
+## Value
+
+A string containing the URL of the document whose storage changed.
+
+## Specifications
+
+{{Specifications}}
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{domxref("Web Storage API", "", "", "nocode")}}
diff --git a/files/en-us/web/api/window/storage_event/index.md b/files/en-us/web/api/window/storage_event/index.md
@@ -10,6 +10,8 @@ browser-compat: api.Window.storage_event
 
 The **`storage`** event of the {{domxref("Window")}} interface fires when a storage area (`localStorage` or `sessionStorage`) has been modified in the context of another document.
 
+This event is not cancelable and does not bubble.
+
 > **Note:** This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made. Pages on other domains can't access the same storage objects.
 
 ## Syntax
@@ -30,22 +32,20 @@ A {{domxref("StorageEvent")}}. Inherits from {{domxref("Event")}}.
 ## Event properties
 
 - {{domxref("StorageEvent.key", "key")}} {{ReadOnlyInline}}
-  - : Returns a string that represents the key changed.
-    The `key` attribute is [`null`](/en-US/docs/Web/JavaScript/Reference/Operators/null)
-    when the change is caused by the storage `clear()` method.
+  - : Returns a string with the key for the storage item that was changed.
+    The `key` attribute is `null` when the change is caused by the storage `clear()` method.
 - {{domxref("StorageEvent.newValue", "newValue")}} {{ReadOnlyInline}}
-  - : Returns a string with the new value of the `key`.
-    This value is `null`
-    when the change has been invoked by storage `clear()` method,
-    or the `key` has been removed from the storage.
+  - : Returns a string with the new value of the storage item that was changed.
+    This value is `null` when the change has been invoked by storage `clear()` method,
+    or the storage item has been removed from the storage.
 - {{domxref("StorageEvent.oldValue", "oldValue")}} {{ReadOnlyInline}}
-  - : Returns a string with the original value of the `key`.
-    This value is `null` when the `key` has been newly added
+  - : Returns a string with the original value of the storage item that was changed.
+    This value is `null` when the storage item has been newly added
     and therefore doesn't have any previous value.
 - {{domxref("StorageEvent.storageArea", "storageArea")}} {{ReadOnlyInline}}
-  - : Returns a {{DOMxRef("Storage")}} object that represents the storage that was affected.
+  - : Returns a {{DOMxRef("Storage")}} object that represents the storage object that was affected.
 - {{domxref("StorageEvent.url", "url")}} {{ReadOnlyInline}}
-  - : Returns string with the URL of the document whose `key` changed.
+  - : Returns string with the URL of the document whose storage changed.
 
 ## Event handler aliases
 
@@ -87,6 +87,6 @@ window.onstorage = () => {
 
 ## See also
 
-- [Web Storage API](/en-US/docs/Web/API/Web_Storage_API)
+- {{domxref("Web Storage API", "", "", "nocode")}}
 - [Using the Web Storage API](/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API)
 - [Responding to storage changes with the StorageEvent](/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API#responding_to_storage_changes_with_the_storageevent)