JavaScript使用sessionStorage实现单会话弹窗仅展示一次失效排查

你的代码存在两个致命的逻辑顺序错误，导致sessionStorage的判断完全失效：

1. 执行顺序完全颠倒：你在读取sessionStorage判断状态之前，就已经直接调用了dialogue.show({ showDetails: true })，页面加载时不管有没有标记都会先触发一次弹窗，后续的判断根本拦截不到这次执行。
2. 标记写入时机完全错误：你在页面刚加载、弹窗刚展示的时候就直接往sessionStorage写入了message=true，而不是等用户确认关闭弹窗后再写入。这会导致每次页面加载都会先把标记设为已展示，后面的if (is_dialogue != 'true')判断永远不会成立，等于白写。

另外你当前的show方法没有预留关闭回调入口，点击「I agree」按钮直接移除DOM，没有地方触发标记写入的逻辑，也需要微调。

1. 调整页面初始化逻辑 #

先读标记，确认当前会话没展示过弹窗再初始化、调用弹窗方法，不要提前执行show：

// 优先读取会话存储标记，判断当前会话是否已经完成弹窗确认
const hasDialogueConfirmed = window.sessionStorage.getItem('im_dialogue_confirmed');
if (hasDialogueConfirmed !== 'true') {
    const dialogue = new IMu.App.Dialogue();
    dialogue.setHtmlMessage(IMu.string('dialogue-heading'));
    // 弹窗展示，传入确认后的回调
    dialogue.show({ showDetails: true }, () => {
        // 用户点击同意关闭弹窗后，再写入已确认标记
        window.sessionStorage.setItem('im_dialogue_confirmed', 'true');
    });
}

2. 微调show方法支持关闭回调 #

你原有show方法已经接收callback参数，但点击关闭按钮时没有执行这个回调，补上对应逻辑即可：

show: function(options, callback)
{
   if (typeof(options) == 'function')
   {
       callback = options;
       options = undefined;
   }
   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();
                 // 新增：关闭DOM后执行传入的确认回调
                 if (typeof callback === 'function') {
                     callback();
                 }
           });
}

• 不要使用message这种过于通用的字符串作为sessionStorage的键名，很容易和站点其他存储逻辑冲突，建议替换成带业务标识的键名，比如上面代码里的im_dialogue_confirmed
• 不要把弹窗初始化、show调用放在判断分支外面，否则就算加了判断，分支外的代码还是会执行，弹窗依然会重复弹出
• 标记写入必须绑定在用户主动确认的动作上，不要页面加载就写入，避免用户没看到弹窗、没点确认就被标记为已展示，不符合业务预期

内容的提问来源于stack exchange，提问作者paul35