Question

更改localStorage时应该触发的事件似乎缺少Firefox中的信息。

我设置了以下事件处理程序：

 function storageEventHandler(e){
      alert("key " + e.key);
      alert("oldValue " + e.oldValue);
      alert("newValue " + e.newValue);
      alert("url " + e.url);
 }

 window.addEventListener('storage', storageEventHandler, false);

应该由此触发：

localStorage.setItem('foo', 'bar');

但是，事件中的所有属性（例如e.key和其他所有属性）都是未定义的。我正在使用Firefox 3.16。为什么事件属性未定义？

EDIT。这是我正在使用的所有代码。存储事件在Firefox 3.16中触发，但在Firefox 4.0b8中不会触发

另外，重要的是，我是从XAMPP运行的http://localhost/index.html 从file：//运行它使其死亡localStorage Getting NULL?

<!DOCTYPE html5>
<html lang="en">
<head>
    <script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
        $(function() {
            var edit = document.getElementById('edit');

            $(edit).blur(function() {
                localStorage.setItem('todoData', this.innerHTML);
            });

            // when the page loads
            if (localStorage.getItem('todoData')) {
                edit.innerHTML = localStorage.getItem('todoData');
            }

            window.addEventListener('storage', storageEventHandler, false);

            function storageEventHandler(e){
                alert('localStorage event fired')
            } 
        });
    </script>
</head>
<body>
<header>
   <h1> My Simple To-Do List </h1>
 </header>
 <section>
 <ul id="edit" contenteditable="true">
   <li></li>
 </ul>
 </section>
    <em>Add some items, and refresh the page. It'll remember what you typed.</em>
</body>
</html>

编辑＃2：这是一个更简单的例子，显示了浏览器之间的问题...

<html>
<head>
<script>
    function storageEventHandler(e){
        alert('localStorage event fired')
    }
    window.addEventListener('storage', storageEventHandler, false);
    localStorage.setItem('foo', 'bar');
    alert('ok')
</script>

</head>
    <body>
    Test
    </body>
</html>

Answer 1

Firefox 3.6（Gecko 1.9.2）没有实现这些属性（规范正在改变，当时大多数其他浏览器也没有实现这些属性）。这在Firefox 4（Gecko 2）中得到修复。见https://bugzilla.mozilla.org/show_bug.cgi?id=501423

[edit]您的测试用例是单页面。 spec说：

当在与本地存储区域相关联的存储对象x上调用setItem（），removeItem（）和clear（）方法时，如果方法执行了某些操作，则在每个HTML对象的Window对象的localStorage属性中存储对象与相同的存储区域相关联，除x 之外，必须触发存储事件，如下所述。

因此，您需要在同一个域上使用单独的页面来观察事件。

localStorage的“存储”事件中未定义的属性

1 个答案: