I'm trying to show a popup window only once per session. In order to achieve that I'm using sessionStorage function. however, the popup is showing up whenever I reload the web page. Can you please let me know where I'm making the mistake.
dialogue = new IMu.App.Dialogue();
dialogue.setHtmlMessage(IMu.string('dialogue-heading'));
dialogue.show({ showDetails: true });
window.sessionStorage.setItem('message','true');
var is_dialogue = window.sessionStorage.getItem('message');
if (is_dialogue != 'true')
{
dialogue.show();
}
Below is the show function
show: function(options, callback)
{
if (typeof(options) == 'function')
{
callback = options;
options = undefined;
}
var test = jQuery('body').children('div.imu-dialogue');
jQuery('body').children('div.imu-dialogue').remove();
var owner = self.owner = jQuery('body').child('div', 'imu-dialogue');
var box = owner.child('div', 'box');
var message = box.child('div', 'message');
if (this.message)
{
var value = this.message.value;
var method = this.message.type;
message[method](value);
}
if (self.details)
{
var details = box.child('div', 'details');
for (var i in self.details)
{
if (! self.details.hasOwnProperty(i))
continue;
var detail = details.child('div', 'detail');
var value = self.details[i].value;
var method = self.details[i].type || 'text';
detail[method](value);
}
var show = box.child('div', 'show-details');
if (! options || options.showDetails !== true)
{
show.text('Details');
details.hide();
}
else
{
details.show();
show.text('I agree');
}
show.on('click', function()
{
self.owner.remove();
});
}
Forget the dialogue.show();
If you try in a new tab of your browser the following code:
window.sessionStorage.setItem('message','true');
is_dialogue = window.sessionStorage.getItem('message');
is_dialogue != 'true' // false
refresh the page and run
is_dialogue = window.sessionStorage.getItem('message');
is_dialogue != 'true' // false
You may have something in your code whick clean session storage on mounted or on created ?
You've got your logic backwards. You need to check if the sessionStorage item has been set first. If it has not been set, show the dialog and then set it.
if (!sessionStorage.getItem('notified')) {
let dialogue = new IMu.App.Dialogue();
dialogue.setHtmlMessage(IMu.string('dialogue-heading'));
dialogue.show({ showDetails: true });
sessionStorage.setItem('notified', 'true');
}
There is no need to check the value of the stored property. Simply testing for it's existence is enough.
After some research found the answer for popup to be shown but it shouldn't be shown when the page is refreshed.
var is_dialogue = window.sessionStorage.getItem("dialogue");
if (is_dialogue != 'true') {
dialogue = new IMu.App.Dialogue();
dialogue.setHtmlMessage(IMu.string('dialogue-heading'));
dialogue.show({ showDetails: true });
sessionStorage.setItem("dialogue", "true");
}