Detailed explanation of storage event of JavaScript inter-page communication method

When writing a page, you sometimes encounter such a requirement, which requires the transmission of data or an event between two pages. At this time, you need to use the storage event I am going to talk about today. Before learning this event, you need to understand the usage of localStorage. For specific usage, please see other documents. The conditions for triggering a storage event are as follows:

1. The same browser opens two pages with the same origin

2. Modified in one web pagelocalStorage

3. Another web page registered thestorageevent

storage event, It only works if the page is from the same source. It has no effect if it is from a different source. So what is homology?

URL consists of protocol, domain name, port and path. If the protocol, domain name and port of two URLs are the same, it means that they have the same source. For example:

1 2 //这个网址，协议是 3 4 //对比URL： 5 http://www.wszdaodao.cn/demo2/other.html //同源 6 http://www.wszdaodao.cn:81/demo/index.html //不同源 7 http://sxh.wszdaodao.cn/demo/index.html //不同源 8 http://www.mamama.cn/demo/index.html //不同源

Therefore, when testing, be sure to ensure that it is a page from the same origin.

The following is the interaction code between the two pages. The implementation is very simple, communication between pageA and pageB.

page A: Set localStorage

    
  click   

page B: Listen for storage events

The above is the detailed content of Detailed explanation of storage event of JavaScript inter-page communication method. For more information, please follow other related articles on the PHP Chinese website!