Seemingly inconsistent onstorage triggering in Safari

Question

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>

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

Dunno, `onstorage` doesn't work for me. But in general you should avoid calling global variables/functions `onstorage` or `onclick`. Because `onclick` is accessible as `window.onclick`, it will receive click events for `window` even without `addEventHandler`! — bobince, Sep 27 '10 at 00:12
bobince, silly me))) you are totally right - there are some problems with onclick variable in global scope. Nonetheless, it is a bug, but less enigmatic ) — shabunc, Sep 27 '10 at 07:01
How is it a bug when you are trying to use reserved global method names? — rxgx, Jan 06 '11 at 05:34
As well as the name clash with onclick, giving handler functions names that begin with 'on' confuses them with the actual event handlers like onclick and onload. I think it's better to give handlers names that describe what they're responding to or what they do, like 'handleClick' or 'initData'. — Sam Dutton, May 18 '11 at 06:45

score 1 · Accepted Answer · edited May 23 '17 at 11:50

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.

Seemingly inconsistent onstorage triggering in Safari

1 Answers1