Introduction to the

Following on from the previous article, postMessage can be used to communicate between browser Windows, but ultimately, it is a bit complicated to use, if my requirements are simple:

  • Communicate with the domain name

  • Only under certain circumstances can two Windows message each other.

Isn’t it a little overqualified to continue using either method? So the storage of this article has come into my sight.

Plug in

First of all, we can take a look at an example:

  • Open the official website of QQ Music (we call this page A at this time)

  • Click on any album or song to play

  • Then it turns out to be a new TAB, just for the player (let’s call this page B).

  • If you return to page A and click another song, you will find that the page B opened before will automatically jump to the page. Instead of refreshing the whole page, the playlist will be updated and the new song will be played

See here, if you are familiar with the relevant API, probably have an idea.

Step by step

First we need to familiarize ourselves with a window event, a storage event.

Event reference StorageEvent

This event is very simple to use, the code is as follows:


window.addEventListener('storage'.function(stroageEvent) {
  console.log('stroageEvent :>> ', stroageEvent);
})

Copy the code

Storage mentioned below are all localStorage, as for why not use sessionStorage, please slide to the bottom of the article, or directly click on the right outline of the question.

If you also happen to write a demo, modify localStorage in the current page to trigger the storage event, but find that it does not. It occurred to me that you could change the localStorage value through the console to trigger events.

If you haven’t tried it, check out this demo

I was also a little confused when I first encountered it, until I saw the documentation and understood it instantly. MDN

A storage event can be triggered only when the value of the current page is modified. A storage event will not be triggered when the value of the current page is modified.

This is just a small incident that doesn’t affect what we want to do.

Then, with this knowledge alone, we can solve the problem of cross-window communication in browsers. The following code

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>A page</title>
</head>
<body>
  <button id="writeBtn">Write a value to storage</button>
  <button id="deleteBtn">Delete a value of storage</button>
  <button id="modifybtn">Example Change a value of storage</button>

  <script>
    let symbolKey = 0
    let writeBtn = document.getElementById('writeBtn')
    let deleteBtn = document.getElementById('deleteBtn')
    let modifybtn = document.getElementById('modifybtn')


    writeBtn.addEventListener('click'.function() {
      localStorage.setItem(symbolKey++, Date.now())
    })
    deleteBtn.addEventListener('click'.function() {
      const key = localStorage.key(0)
      if(! key) {console.log('No more localStorage key values')
        return
      }
      localStorage.removeItem(key)
    })
    modifybtn.addEventListener('click'.function() {
      const key = localStorage.key(0)
      if(! key) {console.log('No more localStorage key values')
        return
      }
      localStorage.setItem(key, Date.now())
    })
  </script>
</body>
</html>
Copy the code
<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>B page</title>
</head>
<body>
  <script>
    window.addEventListener('storage'.function(stroageEvent) {
      console.log('stroageEvent :>> ', stroageEvent);
    })
  </script>
</body>
</html>
Copy the code

Codesandebox code link

Preview page A Preview page B

analyse

Back to the QQ music official website example we mentioned at the beginning

  • Open QQ Music official website

  • Click on any album or song to play

    • Store playlist information to localStorage

  • And then it turns out it’s a new TAB, just for the player

    • Call window.open on page A and get the window object of the new TAB (page B).

    • Read the playlist information stored in localStorage and play the playlist

  • If you return to page A at this time and click another playlist, you will find that the page OPENED before will automatically jump to page B. Instead of refreshing the whole page, the playlist will be updated and new songs will be played

    • Click another song or playlist on page A (measured, click playlist back to clear the playlist, and then play the new playlist. Click on the song, it will be added to the first playlist) and also corresponding to change storage to a different value.

    • If you jump from page A to page B, you can call window.focus(). If the window object of page B has been obtained in step 3, you can call this method to get the focus of page B.

    • B page (player page) Triggers the storage event and reads the playlist again.

ask

SessionStorage not ok?

Reference MDN:

  • The difference lies in that: data stored in localStorage can be retained for a long time; When the page session ends — that is, when the page is closed, the data stored in sessionStorage is erased.

  • Opening multiple Tabs pages of the same URL creates their own sessionStorage.

How can I be sure QQ music is using Storage for communication?

Happened to be thinking about browser cross-window communication problem, open QQ music official website, see this interesting, try to find some useful data in the local look, sure enough, see the playlist information in localStorage.

To verify my guess, I added a storage event on the player page, and then clicked a playlist on the home page, and then triggered the added storage event as expected.

conclusion

This is much easier to understand than the previous postMessage as a whole.

It’s just two o ‘clock

  • Add, delete, or modify storage information on page A.

  • B listens for storage events and performs operations on the modified value.

done.

Finally, how long does it take to write an essay?

I feel like it takes me at least three or four hours to write an article every time, not including the exploration, practice, validation, etc., and I feel like the final article is no different from hydrology, hahaha.

Finally, if you have any thoughts on this article, feel free to post your views.