未调用 localStorage eventHandler答案

【问题标题】：localStorage eventHandler Doesn't Get Called未调用 localStorage eventHandler
【发布时间】：2011-11-17 17:23:50
【问题描述】：

这是我的代码：

<script type="text/javascript">
    function getLocalStorage() {
        try {
            if (!! window.localStorage) return window.localStorage;
        } catch(e) {
            return undefined;
        }
    }

    function getAddEventListener() {
        try {
            if( !! window.addEventListener ) return window.addEventListener;
        } catch(e) {
            return undefined;
        }
    }

    function eventHandler(e) {
        alert("here we are = " + e.storageArea.traveler);
    }       

    function testStorage() {    
        var db = getLocalStorage();
        var addEL = getAddEventListener();

        if(addEL) {
          addEL('storage', eventHandler, false);
        } else {
            alert('This browser does not support event listeners');
        }

        db.setItem('traveler', 'Bill');
        db.setItem('destination', 'Ventura');
        db.setItem('transportation', 'Airplane');

        document.getElementById('results').innerHTML = db.getItem('destination');
    }   
</script>

</head>

<body onload="testStorage();">
  <div id="results"> </div>
</body>

</html>

它成功地在本地存储中插入项目并在“结果”元素中显示结果，但 eventHandler 不起作用。我刷新浏览器窗口并没有看到任何警报消息。为什么？

【问题讨论】：

如果你使用window.addEventListener('storage', eventHandler, false)而不是addEL('storage', eventHandler, false)会发生什么。

标签： html

【解决方案1】：

因为存储事件不适用于同一个窗口/选项卡。它们仅针对使用相同localStorage 的其他窗口/选项卡触发。尝试打开两个单独的选项卡，并在一个选项卡中插入一些数据到localStorage。

这是一个类似的question，它解释了localStorage 事件的工作原理。

【讨论】：

那么，我们如何检查相同的窗口/标签？