Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

init StorageEvent documentation #29760

Merged
merged 24 commits into from
Nov 29, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 14 additions & 13 deletions files/en-us/web/api/storageevent/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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")}}
9 changes: 4 additions & 5 deletions files/en-us/web/api/storageevent/initstorageevent/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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

Expand All @@ -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()")}}.
27 changes: 27 additions & 0 deletions files/en-us/web/api/storageevent/key/index.md
Original file line number Diff line number Diff line change
@@ -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")}}
27 changes: 27 additions & 0 deletions files/en-us/web/api/storageevent/newvalue/index.md
Original file line number Diff line number Diff line change
@@ -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")}}
27 changes: 27 additions & 0 deletions files/en-us/web/api/storageevent/oldvalue/index.md
Original file line number Diff line number Diff line change
@@ -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")}}
27 changes: 27 additions & 0 deletions files/en-us/web/api/storageevent/storagearea/index.md
Original file line number Diff line number Diff line change
@@ -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")}}
51 changes: 51 additions & 0 deletions files/en-us/web/api/storageevent/storageevent/index.md
Original file line number Diff line number Diff line change
@@ -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")}}
27 changes: 27 additions & 0 deletions files/en-us/web/api/storageevent/url/index.md
Original file line number Diff line number Diff line change
@@ -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")}}
24 changes: 12 additions & 12 deletions files/en-us/web/api/window/storage_event/index.md
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Copy link
Contributor

@ShubhamOulkar ShubhamOulkar Nov 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It make sense because session storage is bound to current session/tab. What is use of sharing session storage with other tabs ?

sessionStorage

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.


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
Expand All @@ -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

Expand Down Expand Up @@ -87,6 +87,6 @@ window.onstorage = () => {

## See also

- [Web Storage API](/en-US/docs/Web/API/Web_Storage_API)
- {{domxref("Web Storage API", "", "", "nocode")}}
skyclouds2001 marked this conversation as resolved.
Show resolved Hide resolved
- [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)