如何绑定到同一站点的不同页面上的localStorage更改事件？

尼克·科斯蒂科夫（Nick Kostikov）

我知道如果在两个选项卡中打开同一页面（本主题）并且我需要类似的效果，但是如果我在不同的选项卡中打开了一个站点的两个页面，则如何将更改事件绑定到localStorage 。有任何想法吗？

Yin Gang

为您举一个例子，检查它是否是您想要的？

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。