How to listen for page cache events for vue

Listen to page cache events

This is the cause of the incident

Websocket is needed in the project. When the webpage is just opened, it is necessary to bind the conversation. As for me, a novices, the first time I have been doing this, I just started to get involved in websocket. What's wrong with this? There is a binding set in the component, and all the information returns are in the component, but how do you get other components? And it needs to be cached locally. I hadn't been in contact with vuex at the beginning, so I could only use localStorage to obtain the information returned by the server in other components. This is depressing. How can I listen to this cache?

First configure the vue prototype:

 = (key, newVal) =&gt; {
  if (key === 'websocketHistory') {
    // Create a StorageEvent event    let newStorageEvent = ('StorageEvent');
    const storage = {
      setItem: (k, val) =&gt; {
        (k, val);
        // Initialize the created event        ('setItem', false, false, k, null, val, null, null);
        // Distribute the object        (newStorageEvent);
      }
    };
    return (key, newVal);
  }
};

At this time, you cannot use localStorage directly by writing cache on other pages

You need to set it like this

('websocketHistory', data);

Then in the page that needs to be listened to, use the created function

('setItem', () => {
  ((('websocketHistory')));     
});

In this way, the information returned by the server can be used in the component and stored in the cache. In other components, such as the reply list page, the list can be updated in real time, including the conversation page.

Listen to cache event code

With the update of H5, the front-end often uses local storage to process data interactively. If you want to listen for changes in caches, the following code is what you want.

Create cache events in main

// Listen to cache events.$addStorageEvent = function(type, key, data) {
    if (type === 1) {
        // Create a StorageEvent event        var newStorageEvent = ("StorageEvent");
        const storage = {
            setItem: function(k, val) {
                (k, val);
                // Initialize the created event                (
                    "storageItem",
                    false,
                    false,
                    k,
                    null,
                    val,
                    null,
                    null
                );
                // Distribute the object                (newStorageEvent);
            },
        };
        return (key, data);
    } else {
        // Create a StorageEvent event        var newStorageEvent = ("StorageEvent");
        const storage = {
            setItem: function(k, val) {
                (k, val);
                // Initialize the created event                (
                    "setItem",
                    false,
                    false,
                    k,
                    null,
                    val,
                    null,
                    null
                );
                // Distribute the object                (newStorageEvent);
            },
        };
        return (key, data);
    }
};

During component life cycle

Listen to cache events and get values

    (
      "stotageItem",
      (e) =&gt; { // e represents the stored data { a:1 }        ()
      },
      false
    );

Business code in component

Cache use

 this.$addStorageEvent(0, "useStorage", 
    // Write data    ({ a:1 })
 );

The above are all generations. For personal experience only, I hope you can give you a reference and I hope you can support me more.