html - localStorage eventHandler 未被调用

标签 html

这是我的代码:

<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>

它成功地将项目插入本地存储并在“结果”元素中显示结果,但事件处理程序不起作用。我刷新浏览器窗口,但没有看到任何警告消息。为什么?

最佳答案

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

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

关于html - localStorage eventHandler 未被调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7428671/

相关文章:

javascript - 用于从 javascript 数组中的字符串创建 href 的循环

javascript - 是否可以使用 CSS 像这张图片一样制作动画?

javascript - 如何在引导表上添加分页和搜索

php - 无法在脚本函数中传递 php 变量

javascript - 如何保持响应式移动菜单处于事件状态?

javascript - 如何使用 JQuery 检测 • 符号并将它们转换为 HTML ul

html - 如何在 Firefox 和 Chrome 中实现相同的行高?

javascript - 当 document.body 长度超过 30,000 像素时,HTML2CANVAS 不会渲染它

php - 使用 while 循环从数据库中获取值的多个 html 下拉列表

html - 在浏览器中突出显示边距和填充