使用javascript实现跨表表单持久化_Javascript_Html_Forms_Persistence

使用javascript实现跨表表单持久化

javascript html forms

使用javascript实现跨表表单持久化,javascript,html,forms,persistence,Javascript,Html,Forms,Persistence,上面的代码是直接从名为HTML5基础知识的Tuts+高级课程中复制的。我的问题是Javascript正在检测localStorage更新，但没有更新其他选项卡。在本教程中，它可以完美地工作。我怀疑这是因为我使用了.value，firefox对此有问题。我使用Firefox版本21.0在Ubuntu 13.04 virtualbox上运行。多谢各位事实证明，我只需要在“window.addEventListener（'storage'，function（e）{）”中添加“name.value=l

上面的代码是直接从名为HTML5基础知识的Tuts+高级课程中复制的。我的问题是Javascript正在检测localStorage更新，但没有更新其他选项卡。在本教程中，它可以完美地工作。我怀疑这是因为我使用了.value，firefox对此有问题。我使用Firefox版本21.0在Ubuntu 13.04 virtualbox上运行。多谢各位

事实证明，我只需要在“window.addEventListener（'storage'，function（e）{）”中添加“name.value=localStorage.name；”就可以了。谢谢你，我在Firefox 22中测试了这段代码，效果很好：

我的HTML：

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


函数onLoad（）{
var name=document.getElementById（“输入”）；
name.value=localStorage.name | |“”；
name.addEventListener（'blur'，函数（e）{
if（该值）{
localStorage.setItem（'name'，this.value）
};
});
addEventListener（'storage'，function（））{
console.log（'updated'）；
name.value=localStorage.name；
}，假）；
}
window.onload=onload（）；

结果是

第一个选项卡：

第二个：

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

如果您想更改另一个选项卡上的输入值，请编辑您的

存储

处理程序：

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

而不是

name.value = localStorage.name;

在Ubuntu 12.04下的Chrome 27.0和FF 21.0中工作

（当然，您必须在两个选项卡中打开它以进行检查）

其他选项卡？您的意思是什么？似乎由其他选项卡工作我的意思是，如果我在同一网站上打开两个选项卡，并且我更新其中一个文本框，则其他选项卡文本框应自动更新，以具有相同的值

console.log('updated');