Javascript Safari中看似不一致的存储触发_Javascript_Html_Safari

Javascript Safari中看似不一致的存储触发

javascript html safari

Javascript Safari中看似不一致的存储触发,javascript,html,safari,Javascript,Html,Safari,我在Safari 5.0（并非所有基于WebKit的浏览器）中遇到了以下问题，代码如下： <html> <script>

我在Safari 5.0（并非所有基于WebKit的浏览器）中遇到了以下问题，代码如下：

<html>                                                                                                   
<script>                                                                                             
    var onstorage = function(evt) {                                                                  
            alert([evt.key, evt.oldValue, evt.newValue].join('\n'));                                 
    }                                                                                                

    var onclick = function(evt) {                                                                    
        localStorage.setItem('test', Math.random());                                                 
    }                                                                                                

    var oninit = function() {                                                                        
      //actually, it works the same way with old "plain event" onclick                               
      document.querySelector('#test').addEventListener('click', onclick, false);                     
      window.addEventListener('storage', onstorage, false);                                          
    }                                                                                                

</script>                                                                                            

<body onload="oninit()">                                                                             
    <input id="test" type="button" value="setting a random value"/>                                  
</body>


var onstorage=函数（evt）{
警报（[evt.key，evt.oldValue，evt.newValue].join（'\n'））；
}                                                                                                
var onclick=函数（evt）{
setItem（'test'，Math.random（））；
}                                                                                                
var oninit=函数（）{
//实际上，它与旧的“普通事件”onclick的工作方式相同
document.querySelector（“#test”）.addEventListener（'click'，onclick，false）；
window.addEventListener（'storage'，onstorage，false）；
}

如果我们点击按钮，将触发警报。虽然本守则—

<html>                                                                                                   
<script>                                                                                             
    var onstorage = function(evt) {                                                                  
            alert([evt.key, evt.oldValue, evt.newValue].join('\n'));                                 
    }                                                                                                

    var onclick = function(evt) {                                                                    
        localStorage.setItem('test', Math.random());                                                 
    }                                                                                                

    var oninit = function() {                                                                                           
      window.addEventListener('storage', onstorage, false); 
       //actually, it works the same way with old "plain event" onclick                               
      document.querySelector('#test').addEventListener('click', onclick, false);                                       
    }                                                                                                

</script>                                                                                            

<body onload="oninit()">                                                                             
    <input id="test" type="button" value="setting a random value"/>                                  
</body>


var onstorage=函数（evt）{
警报（[evt.key，evt.oldValue，evt.newValue].join（'\n'））；
}                                                                                                
var onclick=函数（evt）{
setItem（'test'，Math.random（））；
}                                                                                                
var oninit=函数（）{
window.addEventListener（'storage'，onstorage，false）；
//实际上，它与旧的“普通事件”onclick的工作方式相同
document.querySelector（“#test”）.addEventListener（'click'，onclick，false）；
}

触发少量警报，这是出乎意料的。我确实认为这是一个bug，但有人能解释一下吗？为什么只交换两行代码会导致如此奇怪的行为？

没有bug（尽管像其他人评论的那样，我不会将事件处理程序命名为全局函数，名称可能会混淆）

问题是localStorage的通知如何工作。本质上，事件只针对使用相同本地存储的其他窗口（或选项卡）触发

这里是StackOverflow

因此，在您的示例中，存储更改事件不会触发：处理程序在同一页上。

Dunno，

onstorage

对我不起作用。但一般来说，您应该避免调用全局变量/函数

onstorage

或

onclick

。因为

onclick

可以作为

窗口访问。onclick

，所以即使没有

addEventHandler

，它也会收到

窗口的单击事件！bobince，愚蠢的我）你完全正确-onclick变量在全局范围内存在一些问题。尽管如此，这是一个bug，但不那么神秘）当您试图使用保留的全局方法名称时，它怎么会是一个bug？以及名称与onclick冲突，给出以“on”开头的处理程序函数名称会将它们与实际的事件处理程序（如onclick和onload）混淆。我认为最好给处理程序起一个名字来描述它们响应什么或做什么，比如“handleClick”或“initData”。