Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML5 / JS storage event handler

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";
    }
}
like image 468
Ken Avatar asked Jun 16 '10 15:06

Ken


People also ask

What is storage event in JS?

The storage event of the Window interface fires when a storage area ( localStorage ) has been modified in the context of another document. Note: This won't work on the same page that is making the changes — it is really a way for other pages on the domain using the storage to sync any changes that are made.

How do I enable Web Storage API in Firefox?

To enable/disable Web Storage in Firefox:Search for " dom. storage. enabled ", and double-click on the entry (or use the adjacent toggle button) to toggle its enabled/disabled state.

What event is fired after web storage update?

A storage event is fired when you insert, update or delete a sessionStorage or localStorage property.

When should I use local storage vs session storage?

sessionStorage is similar to localStorage ; the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends. Whenever a document is loaded in a particular tab in the browser, a unique page session gets created and assigned to that particular tab.


2 Answers

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

like image 154
jmease Avatar answered Oct 06 '22 00:10

jmease


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.

like image 38
chenhui5416 Avatar answered Oct 06 '22 00:10

chenhui5416