javascript - How to share data between different browser tabs? Is localStorage and sessionStorage possible?

Question

Overview: After logging in to a system, there is a page to configure some information. After configuring the information, you can continue to operate other pages, but my general operating habit is to open two tabs, one tab is The configuration page is always open, and the other tab is the operation page;

Requirement 1: Currently I put some configuration information into sessionStorage, but the sessionstorage of the two tabs are not shared, only the current The page configuration is valid only when the current page operates other pages. The reason why localStorage is not used is that the configuration information will always be saved and will not be updated after the next login.

Requirement 2: The current logic for the front desk to obtain the information in sessionStorage is as follows. If the item exists and is not empty, it will be used directly. , will not go to the background to get it. The problem is that in a multi-client scenario, other users have changed the configuration, and the current client cannot obtain the latest configuration information in time. I have an idea that is based on http 3xx. Every time the frontend gets configuration information, a request is made to the background. If lastmodifiedtime remains unchanged, continue to use local data. Once it changes, the latest configuration information will be returned. Do you have any good suggestions? Share it!

I wonder if anyone has better ideas and suggestions

Answer 1

If I face such a need, what I do:

Requirement 1: Use LocalStorage, but the Key name will carry the expiration time, such as item&1494485763;

Requirement 2: Each time a configuration item is requested, the request request carries the cookie value of the last modification time; if the last modification time is the same, return empty and use local data; otherwise, return the latest configuration item;

Answer 2

localStorage, then reset it on the welcome page on the login page, isn’t that enough?

Then requirement 2 is to set the expiration time. If ten minutes have passed since the last localstorage. Pull the data again.

Answer 3

localStorage or indexedDB can be used;
For the processing of cached data, you can design an expiration mechanism, or you can generate a UUID for each transaction, and clear the cache after all transactions are completed.

Answer 4

localStorage can completely solve the problem. If the information you store changes, just update the corresponding storage information in localStorage. Of course, if there is sensitive information, it cannot be stored in the browser.