How Storage Event implements communication between pages

The content shared with you in this article is about how Storage Event implements communication between pages. The content is of great reference value and I hope it can help friends in need.

We all know that triggering window.onstorage must meet the following two conditions:

1. Save (update) a certain storage through localStorage.setItem or sessionStorage.setItem

2. When saving (updating) this storage, its new value must be different from the previous value

The second condition above, simply speaking, is : Either it is the initialization of storage, because the storage does not exist, its value is null; or it is the update of existing storage

Example:

// 初始化storage
window.localStorage.setItem('a', 123);

// 注册onstorage事件
window.onstorage = (e) => {
  console.log(e);
};

// 更新storage
window.localStorage.setItem('a', 123);

The last line of code above will not trigger Onstorage event, because the value of a has not changed, it is 123 before and after, so the browser determines that this update is invalid

Since the onstorage event is triggered by the browser, if we open multiple Pages under the same domain name, and execute the window.localStorage.setItem method on any one of them (also ensure that the second condition mentioned at the beginning of the article is met), then if other pages listen to the onstorage event, Then the onstorage event callbacks in these pages will be executed.

Example:

// http://www.example.com/a.html
<script>
// 注册onstorage事件
window.onstorage = (e) => {
  console.log(e);
};
</script>

// http://www.example.com/b.html
<script>
// 注册onstorage事件
window.onstorage = (e) => {
  console.log(e);
};
</script>

// http://www.example.com/c.html
<script>
// 触发onstorage事件
window.localStorage.setItem('a', new Date().getTime());
</script>

As long as page c is opened after page a and page b (even if the three pages are not in the same browser window, it is required here (difference between windows and tab pages), then the onstorage events in pages a and b will be triggered

Now that we know how to use storage events to achieve communication between pages, what does this communication mean to us? What's the purpose?
In fact, we only need to know which storage update operation triggered the onstorage event. So how do we know? The onstorage event callback, like other event callback functions, also receives an event object parameter. There are three useful properties in this object, which are:

1. key is initialized or updated The key name of storage

2. oldValue is the value before the storage is initialized or updated

3. newValue is the value after the storage is initialized or updated

Combining these 3 key attributes, we can achieve data synchronization between pages

Finally, let’s mention the difference between localStorage and sessionStorage

What is stored in localStorage There is no expiration time setting for data, and the data stored in sessionStorage will be cleared when the page session ends

Related recommendations:

Android custom ring LoadingView effect

Html5 mobile terminal award-winning seamless scrolling animation implementation

The above is the detailed content of How Storage Event implements communication between pages. For more information, please follow other related articles on the PHP Chinese website!