'forcing local storage events to fire in the same window

From many sources, I have found that the local storage events only fire in windows/tabs that did not originate the change.

My question is, is there any way I could detect change from the same window? Or perhaps override the functionality to force the event to fire within the same window/tab?

It just seems impractical to not include the option, but I cannot find a way to do it.

Thanks

javascripthtmllocal-storage


Solution 1:[1]

Yes, you can generate unique id for each tab and compare them, look how this guy did here Another solution I found based on the same idea, generate and compare unique ids.. here

Solution 2:[2]

This is easily handled with localDataStorage, where you can transparently set/get any of the following "types": Array, Boolean, Date, Float, Integer, Null, Object or String. Of course, it also fires events in the same window/tab for key value changes, such as those made by the set or remove methods.

[DISCLAIMER] I am the author of the utility [/DISCLAIMER]

Once you instantiate the utility, the following snippet will allow you to monitor the events:

function nowICanSeeLocalStorageChangeEvents( e ) {
    console.log(
        "subscriber: "    + e.currentTarget.nodeName + "\n" +
        "timestamp: "     + e.detail.timestamp + " (" + new Date( e.detail.timestamp ) + ")" + "\n" +
        "prefix: "        + e.detail.prefix  + "\n" +
        "message: "       + e.detail.message + "\n" +
        "method: "        + e.detail.method  + "\n" +
        "key: "           + e.detail.key     + "\n" +
        "old value: "     + e.detail.oldval  + "\n" +
        "new value: "     + e.detail.newval  + "\n" +
        "old data type: " + e.detail.oldtype + "\n" +
        "new data type: " + e.detail.newtype
    );
};
document.addEventListener(
    "localDataStorage"
    , nowICanSeeLocalStorageChangeEvents
    , false
);

Solution 3:[3]

Whenever you want to trigger it on the same tab, add this line

window.dispatchEvent(new Event("storage"));

Add an event listener for the page

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

function storageEventHandler(e) {
    console.log("Hello!")
}

That's all

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Community
Solution 2 Mac
Solution 3 Ahmet Firat Keler

Related Questions