如何实现单用户单次访问仅显示一次加载模态框？求sessionStorage用法指导

嘿，这个需求其实很好解决！咱们利用浏览器的sessionStorage（或者localStorage，看你想要的持久化程度）来标记用户是否已经看过这个引导模态框，就能实现「每次访问仅显示一次」的效果。

先给你修改好的完整代码 #

直接替换你原来的那段脚本就行：

$(window).on('load', function() {
  // 检查sessionStorage里是否有已看过引导的标记
  if (!sessionStorage.getItem('hasSeenFeatureGuide')) {
    $('#featureGuide').modal('show');
    // 标记为已看过，避免重复显示
    sessionStorage.setItem('hasSeenFeatureGuide', 'true');
  }
});

关键逻辑解释 #

• sessionStorage vs localStorage：
  • 用sessionStorage的话，标记只在当前浏览器会话有效——用户关闭标签页/浏览器后，下次打开会重新显示模态框
  • 如果想让用户只要看过一次，之后再也不显示（除非手动清缓存），就把sessionStorage换成localStorage
• 判断逻辑：加载页面时先检查有没有hasSeenFeatureGuide这个标记，没有的话才弹出模态框，然后立刻设置标记
• 代码位置：和你原来的脚本位置一样，确保放在jQuery加载完成之后，而且#featureGuide这个模态框元素已经在DOM里了（一般放在页面底部</body>标签前最合适）

额外小提示 #

如果之后想测试效果，直接在浏览器控制台执行sessionStorage.removeItem('hasSeenFeatureGuide')（或者对应localStorage的命令），就能清除标记，重新触发模态框显示啦！

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