Force localStorage event to fire in a different window - html

Question

When the user clicks on a link it opens a page, adds some content to the local storage then the page that was just opened is supposed to listen for localStorage events. It doesn't seem to fire as I understand both windows must be opened at the same time for the storage event to fire. So I tried to invoke it manually like this:
//page containing the link to other window
$('.view-btn').click(function () {
var selectionName = $(this).parent().parent().find('td:first').text();
var key = "sel-view-1";
addToStorage(key, selectionName);
});
var addToStorage = function (key, value) {
defineKey(key, value);
var e = $.Event("storage");
e.originalEvent = {
key: key,
newValue: value
};
var windowRef = window.open("Create_a_selection", "_self");
$(windowRef).trigger(e);
};
var defineKey = function (key, value) {
if (localStorage.getItem(key) === null) {
localStorage.setItem(key, value);
} else {
var nr = parseInt(key.substring(key.lastIndexOf('-') + 1)) + 1;
key = 'sel-view-' + nr;
return defineKey(key, value);
}
}
//page that was just opened
$(window).bind('storage', onStorageEvent);
function onStorageEvent(storageEvent) {
console.log('yay');
if (storageEvent.originalEvent) {
var key = storageEvent.originalEvent.key;
var value = storageEvent.originalEvent.newValue;
if (key.indexOf("sel-view") > -1) {
$('#selection-name-label').html(value);
}
}
};
But this still doesn't catch the event... It does however catch it if the page is already opened so I'm wondering if this could have something to do with the page not being loaded yet perhaps?
Any help is appreciated.