JavaScript: How to reload page when localstorage changes?

Question

I'm making a series of JavaScript pages that share information via localStorage. Everything works fine, but when I change a parameter in one of the pages and then move to a different one, I need to reload manually with Ctrl R so that the changes become effective. I succeeded at doing the refreshing automatic using onBlur, but, alas, such function stops working when I upload the scripts to Android (the final destination of these scripts is becoming an Android app).

So now I'm trying to use addEventListener with the storage event, but nothing happens, I still have to do the refreshing manually. I've read lots of web sites and gone through a lot of examples but I still don't get it. Here is the relevant code:

window.addEventListener("storage", handler);

function handler() {
    location.reload();
}

Let me share some more about what I'm trying to do: I have a series of html pages, each of them with a form to make a calculation for a diet plan. Example: the first one asks for body info and gives you your basal calory intake.

A second page takes that basal calory intake number, stored using localStorage, shows it in the screen, and asks you in a form to introduce your daily calory target; with those two numbers, it calculates how long would it take to lose one kilo.

If I go back to the first page and enter different body measures, generating thus a different output, and then revisit page 2, I want to find that basal calory number there automatically refreshed. I succeeded at doing this IN THE COMPUTER using onBlur and onFocus:

window.onblur= function() {window.onfocus= function () {location.reload(true)}};

This reloads the page of the tab you're landing in every time js detects you've just changed from one tab to another, notwithstanding if localStorage data has been changed or not - a 'just in case' approach.

The problem is that when I upload these pages to Android, the refreshing stops stops working (and in Android you cannot do ctrl+r to force it). Apparently Android does not consider the different pages as tabs; that would explain onBlur and onFocus not working.

That's why now I'm trying the localStorage approach: "if localStorage has changed, (ie, someone has been changing values in the other pages), then refresh the screen on the current page (so that the new values show up)".

I know localStorage events work in my browser because this demo works. But I cannot make the code work in my scripts.

I hope having explained myself more clearly this time (please bear with me, this is my first post...)

Answer 1

The storage handler is called when it changes in another tab not in the current tab.
You could override the setItem method.

!function() {
    var setItem = Storage.prototype.setItem;

    Storage.prototype.setItem = function() {
       setItem.apply(this, arguments);
       location.reload();
    };
}();