HTML5 / JS storage event handler

Question

I'm using Safari webkit's engine together with HTML5 and JS to create an offline application now I'm using the sessionStorage array to store status of my application(simulation).

The storage data works fine with the inspector the functions work fine it's the event handler that isn't responding.

The test preformd by Anurag at http://jsfiddle.net/pvRgH/ also doesn't work here:

window.addEventListener('storage', storageEventHandler, false);
function storageEventHandler(evt){
    alert("storage event called key: " + evt.key );
    switch(evt.key){
        case 'bat1':
        case 'bat2': batteryDCMeter(); break;
        case 'extPowerOn': rechargeBattery(); break;
    }   
}

function load()
{
    dashcode.setupParts();
    //set HTML 5 key/value's
    sessionStorage.setItem('bat1', 'OFF');
    sessionStorage.setItem('bat2', 'OFF');
    sessionStorage.setItem('bat1DC', '26.2');
    sessionStorage.setItem('bat2DC', '26.2');
}

function bat1OnOff(event)
{
    if(sessionStorage['bat1'] == 'OFF'){
        sessionStorage['bat1'] = 'ON';
    }else{
        sessionStorage['bat1'] = "OFF";
    }
}


function bat2OnOff(event)
{
    if(sessionStorage['bat2'] == 'OFF'){
        sessionStorage['bat2'] = 'ON';
    }else{
        sessionStorage['bat2'] = "OFF";
    }
}

score 19 · Answer 1 · edited May 23 '17 at 12:26

19

Storage event handlers only fire if the storage event is triggered from another window.

How can I get an event to fire every time localStorage is updated in Safari 5+?

edited May 23 '17 at 12:26

Community

1
1

answered Nov 14 '11 at 17:26

jmease

2,507
5
49
89

score 1 · Answer 2 · answered Mar 28 '14 at 02:31

the 'storage' event occurred by the other tab in the browser. When you change the storage in one page and addEventLister also in this page , the window can not catch the message.

for example

You have two page, pageOne change the storage , pageTwo will catch the 'storage' message and handle this, but pageOne couldn't catch the message.

score 0 · Answer 3 · answered Jun 16 '10 at 16:14

0

Could you provide some more code for how you are storing the keys? It works for me on Safari - http://jsfiddle.net/pvRgH/

answered Jun 16 '10 at 16:14

Anurag

140,337
36
221
257

The link you provided the code doesn't give any results. Check updated question for more code – Ken Jun 16 '10 at 16:17
So there's no alert popping up indicating the storage event handler was called for you? What version of Safari are you testing this on? – Anurag Jun 16 '10 at 16:42
No nothing is happening I'm running Safari 5.0(6533.16) MacOSX 10.6.3 – Ken Jun 16 '10 at 16:44
1

Nothing happens for me either (Safari 5.0.3, Chrome 10) – Stefano Mar 18 '11 at 08:14

Mustkeem K · Answer 4 · 2020-10-04T04:47:13.317

To communicate between multiple tabs we can use storage event. You store a data item in local storage and you will get to know that your local storage is updated.

Check out the code.

      window.addEventListener("storage", storageEventHandler, false);

      function storageEventHandler(evt) {
        alert("storage updated");
      }

      function clickme() {
        localStorage.setItem("someKey", "someValue");
      }

<button onclick="clickme()">Click Me</button>

Note: storage event only fires in other tabs. Not inside the tab, you are in currently. click^ :)

HTML5 / JS storage event handler

4 Answers4

Linked