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

【问题标题】：Seemingly inconsistent onstorage triggering in SafariSafari 中看似不一致的存储触发
【发布时间】：2011-06-09 09:23:13
【问题描述】：

我在 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>

将触发警报，以防我们单击按钮。虽然这段代码 -

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

意外地触发了一些警报。我确实认为这是一个错误，但有人无法解释我 - 为什么只交换两行代码会导致这种奇怪的行为？

【问题讨论】：

不知道，onstorage 不适合我。但总的来说，您应该避免调用全局变量/函数onstorage 或onclick。因为onclick 可以作为window.onclick 访问，所以即使没有addEventHandler，它也会收到window 的点击事件！
bobince，愚蠢的我）））你是完全正确的 - 全局范围内的 onclick 变量存在一些问题。尽管如此，这是一个错误，但不那么神秘）
当您尝试使用保留的全局方法名称时，这是一个怎样的错误？
除了名称与 onclick 冲突外，以“on”开头的处理函数名称会使它们与实际的事件处理程序（如 onclick 和 onload）混淆。我认为最好给处理程序起一个名称来描述他们正在响应什么或他们做什么，例如“handleClick”或“initData”。

标签： javascript html safari

【解决方案1】：

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

问题在于 localStorage 的通知如何工作。本质上，事件只会为使用相同 localStorage 的 other 窗口（或选项卡）触发。

这是 StackOverflow 上的 a similar question and answer。

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

【讨论】：