尝试在 javascript 中使用 sessionStorage

Question

我试图每 session 只显示一次弹出窗口 window。为了实现这一点，我使用 sessionStorage function。但是，每当我重新加载 web 页面时，弹出窗口就会出现。 你能告诉我我在哪里犯了错误吗？

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

下面是节目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();
           });
}

Answer 1

忘记dialogue.show();

如果您在浏览器的新选项卡中尝试以下代码：

window.sessionStorage.setItem('message','true');
is_dialogue = window.sessionStorage.getItem('message');
is_dialogue != 'true' // false 

刷新页面并运行

is_dialogue = window.sessionStorage.getItem('message');
is_dialogue != 'true' // false 

您的代码中可能有一些东西可以在挂载或创建时清理会话存储？

Answer 2

你的逻辑倒退了。 您需要先检查是否已设置sessionStorage项。 如果尚未设置，请显示对话框然后设置它。

if (!sessionStorage.getItem('notified')) {
  let dialogue = new IMu.App.Dialogue();
  dialogue.setHtmlMessage(IMu.string('dialogue-heading'));
  dialogue.show({ showDetails: true });
  sessionStorage.setItem('notified', 'true');
}

无需检查存储属性的值。 简单地测试它的存在就足够了。

Answer 3

经过一些研究发现要显示弹出窗口的答案，但刷新页面时不应显示它。

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