How to bind to localStorage change event on different pages of the same site?

Question

I know how to bind change event to localStorage if the same page opened in two tabs (this topic) and i need the similar effect, but if i had two pages of one site opened in different tabs. Any ideas?

When localStorage is modified, a storage event will be fired on all other pages that share the storage. You just need to handle the event, and retrieve updated data. This also works for sessionStorage. — Yin Gang, May 09 '16 at 10:17
@YinGang i'm trying to create storage item and the second page sees it but only after refresh. '$(window).bind('storage' ....' isn't working — Nick Kostikov, May 09 '16 at 10:37
@NickKostikov, I've post an answer, just save them as two html files under your site root, and load both in browser, check is it what you want. Thx. — Yin Gang, May 09 '16 at 13:29

score 1 · Accepted Answer · edited Oct 20 '20 at 09:18

Make an example for you, check is it what you want?

http://www.yoursite.com/page1.html

<html>
<head>
    <title>Page 1</title>
</head>
<body>
    <input type="text" id="value"/>
    <button id="save">Save</button>
</body>
<script>

    function $ID(id){
        return document.getElementById(id);
    }
    function addHandler(ele,trigger,handler){
        if(window.addEventListener){
            ele.addEventListener(trigger,handler,false);
            return false;
        }
        window.attachEvent(trigger,handler);
    }

    function saveToStorage(){
        var value = $ID('value').value;
        window.localStorage.setItem('key',value);
    }

    addHandler($ID('save'),"click",saveToStorage);
</script>
</html>

http://www.yoursite.com/page2.html

<html>
<head></head>
<body>
    value:
    <span id="value"></span>
</body>
<script>

    function addHandler(ele,trigger,handler){
        if(window.addEventListener){
            ele.addEventListener(trigger,handler,false);
            return false;
        }
        window.attachEvent(trigger,handler);
    }

    function onStorageEvent(e) {
        var value = localStorage.getItem('key');
        console.log('Successfully communicate with other tab');
        console.log('Received data: ' + value);
        document.getElementById('value').innerText = value;
    }

    addHandler(window,"storage",onStorageEvent);

</script>
</html>

Thank you! This is exactly what i need. – Nick Kostikov May 09 '16 at 15:58 — Nick Kostikov, May 09 '16 at 15:58

score 0 · Answer 2 · answered Sep 24 '21 at 06:29

You can use storage event. This is vanilla js.

window.addEventListener('storage', () => {
  // When local storage changes, dump the list to
  // the console.
  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
});

// or
window.onstorage = () => {
  // When local storage changes, dump the list to
  // the console.
  console.log(JSON.parse(window.localStorage.getItem('sampleList')));
};

MozillaMDN doc

How to bind to localStorage change event on different pages of the same site?

2 Answers2