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

Question

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

Ale*_*xis 2 javascript html5 javascript-events local-storage

更改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);

Run Code Online (Sandbox Code Playgroud)

应由此触发:

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

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

编辑.这是我正在使用的所有代码.存储事件在Firefox 3.16中触发,但在Firefox 4.0b8中不触发

此外,重要的是,我从XAMPP运行它http://localhost/index.html 从file运行它://使它死于localStorage获取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>

Run Code Online (Sandbox Code Playgroud)

编辑#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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Nic*_*lay 8

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

[edit]你的测试用例是单页面.该规范说:

当在与本地存储区域相关联的存储对象x上调用setItem(),removeItem()和clear()方法时,如果方法执行了某些操作,那么在每个HTML对象的Window对象的localStorage属性的Storage对象中都是如果与x相同的存储区域相关联,则必须触发存储事件,如下所述.

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

归档时间：	14 年，11 月前
查看次数：	3536 次
最近记录：	14 年，11 月前