0 
var name = document.getElementById('name');
  name.value = localStorage.name || '';

  name.addEventListener('blur', function() {
    if ( this.value ) localStorage.setItem('name', this.value);
  }); 

  window.addEventListener('storage', function() {
    console.log('updated');
  }, false);

上面的代码直接复制自一个名为 HTML5 Fundamentals 的 Tuts+ Premium 课程。我的问题是 Javascript 正在检测 localStorage 更新，但没有更新其他选项卡。在本教程中，它完美无缺。我确实怀疑这种情况正在发生，因为我正在使用 .value 并且 firefox 对此存在问题。我正在使用 Firefox 21.0 版的 Ubuntu 13.04 虚拟机上运行。谢谢

原来我只需要添加“name.value = localStorage.name;” 在“window.addEventListener（'storage'，function（e）{”中，它起作用了。谢谢

4

2 回答 2

1

我在 Firefox 22 中测试了这段代码，它运行良好：

我的 HTML：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <input type="text" id="input"/>
    <script>
    function onLoad(){
        var name=document.getElementById("input");
        name.value = localStorage.name || '';
        name.addEventListener('blur',function(e){
            if (this.value) {
                localStorage.setItem('name',this.value)
            };
        });

        window.addEventListener('storage',function(){
            console.log('updated');
            name.value = localStorage.name;
        },false);
    }
    window.onload = onLoad();

    </script>
</body>
</html>

结果是……

第一个标签：

在此处输入图像描述

第二个：

在此处输入图像描述

如果您有任何进一步的问题欢迎讨论。

于 2013-07-08T06:50:06.653 回答
0

如果您想更改另一个选项卡上的输入值，请编辑您的storage处理程序：

name.value = localStorage.name;

代替

console.log('updated');

适用于 Ubuntu 12.04 下的 Chrome 27.0 和 FF 21.0

演示 （当然你必须在 2 个标签中打开它才能检查）

于 2013-07-08T06:54:25.873 回答