How can I synchronize browser tabs? That is, let's say I opened 3 tabs of the same site. On one of them I pressed a button, and in all three tabs, for example, an alert ('Hello') occurred;

I tried the method found on the network through EventListener to LocalStorage, but it works through time, and not in all browsers.

    1 answer 1

    To synchronize tabs, it is convenient to use the storage event :

    window.addEventListener('storage', sync); function sync(event) { if (event.key == 'name') { ... } }

    If a very complicated tab synchronization is required, then the best practice is to simply notify the user about changes in other tabs with a request to reload the page.

    • I decided to use your method, but a little in my window.addEventListener ('storage', function (e) {if (e.key == 'reload') {location.reload ();}}); , if you enter in the browser console localStorage.setItem ('reload', 'true); - tabs reload. If this code is executed directly in js files, nothing happens. Do not tell me why? - Vladimir
    • @ Vladimir 1. Background reloading of tabs is not a good idea, it is better to manipulate the DOM. 2. The method is not stable and needs thorough testing. 3. No quotes after 'true - Maxim Yaskov
    • In my case, it is more acceptable to reload tabs. Quotes are, I just inattentively wrote a comment. Since the method is not stable and does not always work, do not know a similar solution? - Vladimir
    • @ Vladimir 1. Storage + check on the timer. 2. Cookie + timer check. 3. Broadcast Channel API. - Maxim Yaskov
    • Thank you, you do not know if there is anything like the Listener, for example for a cookie, so that the loop does not check every time. Well, or besides, Storage, but correctly working. - Vladimir