未输入密码时如何保持modal打开？解决页面刷新后modal消失问题

问题根因 #

你代码里定义的cookie是仅存在于页面运行内存的临时变量，页面刷新后数据会完全重置，没有实现真正的状态持久化，所以无法跨刷新保持modal的显示状态。

解决方案 #

可以使用浏览器自带的localStorage做本地持久化存储，调整后的完整JS代码如下：

$(function() {
  $('.lev4o').modal({
    closable: false
  });
  // 读取本地存储的验证状态
  const isPassed = localStorage.getItem('password_passed') === 'true';
  if (!isPassed) {
    // 未验证通过就显示modal
    $('.lev4o').modal('show');
  }
});

$(document).ready(function() {

  // 阻止表单提交刷新页面
  $("form").submit(function(event) {
    event.preventDefault();
  });

  // 提交按钮点击监听
  $('.fluid').click(function() {
    if ($('input:password').val() == "pass") {
      alert('密码正确!');
      // 验证通过后写入本地存储标记
      localStorage.setItem('password_passed', 'true');
      $(".lev4o").modal('hide');
    } else {
      alert('密码错误!');
    }
  });

  // 回车键提交适配
  $('input:password').keyup(function(event) {
    if (event.keyCode == 13) {
      $('.fluid').click();
    }
  });

});

逻辑说明 #

• 页面初始化时会优先读取本地存储的password_passed标记，没有该标记或者标记为false时，默认弹出密码modal
• 当用户输入正确密码后，会往本地存储写入验证通过标记，后续刷新页面时会识别到该状态，不再弹出modal
• 如果需要重置验证状态，执行localStorage.removeItem('password_passed')即可清除标记，下次刷新会重新弹出modal

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