source

The source of the problem was a link posted by one of the Nuggets’ big men to a portable air conditioner

There is an independent remote control function in the page, in another window to modify the temperature and mode, the current page will be updated in real time, with a curious attitude to study a while, found that it is through the local localStorage storage.Then it causes another problem, is how to achieve real-time update localStorage, the specific monitoring implementation is as follows.

Vue listens for localStorage changes

Application scenario: Page B modifies some data and stores the data in localStoragez. Page A needs to obtain data changes in real time. The pages must be of the same origin (under the same domain name, for example, https://www.baidu.com/).

Stored in page B

    localStorage.set('name'.'value')
Copy the code

Monitor and obtain in real time on page A

mounted() {
    // Listen for changes to the specified key in the cache
    window.addEventListener('storage'.(e) = > {
      if(e.key && e.key == 'name' && e.newValue){
        this.socketQuery = e.newValue // Get the latest name of page B}})},Copy the code

Write in the last

Dynamic update rules for localStorage

Development work, even if you do not use localStorage or do not know localStorage is still the same. But is the problem localStorage?

No!

Do you think this is writing localStorage? Wrong! This article is about my curiosity about this project!

Curious about the writer’s imagination, curious about the code she uses to describe some small things in life.

.

Yeah, it’s just fun