-
Notifications
You must be signed in to change notification settings - Fork 22.4k
/
index.md
92 lines (66 loc) · 3.3 KB
/
index.md
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
---
title: "Window: storage event"
short-title: storage
slug: Web/API/Window/storage_event
page-type: web-api-event
browser-compat: api.Window.storage_event
---
{{APIRef}}
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 {{Glossary("browsing context")}} that is making the changes — it is really a way for other browsing contexts on the domain using the storage to sync any changes that are made. Browsing contexts on other domains can't access the same storage objects.
## Syntax
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
```js
addEventListener("storage", (event) => {});
onstorage = (event) => {};
```
## Event type
A {{domxref("StorageEvent")}}. Inherits from {{domxref("Event")}}.
{{InheritanceDiagram("StorageEvent")}}
## Event properties
- {{domxref("StorageEvent.key", "key")}} {{ReadOnlyInline}}
- : 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 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 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 object that was affected.
- {{domxref("StorageEvent.url", "url")}} {{ReadOnlyInline}}
- : Returns string with the URL of the document whose storage changed.
## Event handler aliases
In addition to the `Window` interface, the event handler property `onstorage` is also available on the following targets:
- {{domxref("HTMLBodyElement")}}
- {{domxref("HTMLFrameSetElement")}}
- {{domxref("SVGSVGElement")}}
## Examples
Log the `sampleList` item to the console when the `storage` event fires:
```js
window.addEventListener("storage", () => {
// When local storage changes, dump the list to
// the console.
console.log(JSON.parse(window.localStorage.getItem("sampleList")));
});
```
The same action can be achieved using the `onstorage` event handler property:
```js
window.onstorage = () => {
// When local storage changes, dump the list to
// the console.
console.log(JSON.parse(window.localStorage.getItem("sampleList")));
};
```
## Specifications
{{Specifications}}
## Browser compatibility
{{Compat}}
## See also
- {{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)