Sample code for implementing communication between pages using Storage Events

This article mainly introduces the relevant information about the sample code of using Storage Event to realize communication between pages. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

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

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

• 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 same domain names pages under the page, and execute the window.localStorage.setItem method on any one of the pages (also ensure that the second condition mentioned at the beginning of the article is met), then if other pages listen to the onstorage event, the onstorage in these pages The event callback 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(&#39;a&#39;, 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, you need to distinguish between windows and tab pages) difference), 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 is the use of this communication for us?

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:

• key is initialized or updated The key name of storage

• oldValue is the value before the storage is initialized or updated

• 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

Summary: The above is the entire content of this article, I hope it will be helpful to everyone's learning. For more related tutorials, please visit Html5 Video Tutorial!

Related recommendations:

php public welfare training video tutorial

HTML5 graphic tutorial

HTML5Online Manual

The above is the detailed content of Sample code for implementing communication between pages using Storage Events. For more information, please follow other related articles on the PHP Chinese website!