Seemingly inconsistent onstorage triggering in Safari_问答_开发者

Seemingly inconsistent onstorage triggering in Safari

开发者 https://www.devze.com 2023-01-17 21:37 出处：网络

I\'ve encountered the following issue in the Safari 5.0 (not in all WebKit-based browsers), this code:

相关专题：javascript

I've encountered the following issue in the Safari 5.0 (not in all WebKit-based browsers), this code:

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

will trigger on alert, in case we click the button. While this code -

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

trig开发者_如何转开发gers few alerts, as not expected. I do think this is a bug, but can't somebody explain me - why swapping just two lines of codes results in such a weird behaviour?

There is no bug (although like others have commented I would not name the event handlers as global functions with names that might confuse).

The issue is how the notifications for localStorage work. In essence, events are only fired for other windows (or tabs) that use the same localStorage.

Here's a similar question and answer here on StackOverflow.

So, in your example, the storage changed event won't fire: the handler is on the same page.