代码之家 › 专栏 › 技术社区 › shabunc

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

safari html5 javascript

shabunc · 技术社区 · 15 年前

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

不会像预期的那样触发警报。我确实认为这是一个bug,但没人能解释我——为什么仅仅交换两行代码会导致如此奇怪的行为?

1 回复 | 直到 15 年前

Community Mohan Dere 9 年前

没有bug(尽管和其他人一样,我不会将事件处理程序命名为名称可能混淆的全局函数)。

问题是本地存储的通知如何工作。事实上,事件的激发只是为了其他使用相同本地存储的窗口(或选项卡)。

这里是 a similar question and answer 在StackOverflow上。

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