Search code examples
javascriptsession-storage

Trying to use sessionStorage in javascript


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();
           });
}

Solution

  • 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.