如何实现网页弹窗仅在用户首次访问时显示？

嘿，这个问题我之前也碰到过！咱们可以利用浏览器的**本地存储（localStorage）**来记录用户是否已经看过弹窗，这样就能轻松实现弹窗只在用户第一次访问时显示的需求。

核心思路 #

浏览器的localStorage可以持久化存储少量数据（除非用户手动清除浏览器缓存），我们可以用它存一个简单的标记，比如hasSeenPopup：

• 用户第一次访问时，这个标记不存在，我们就显示弹窗；
• 用户点击关闭弹窗后，把标记存入localStorage；
• 后续用户再访问时，检测到标记存在，就不再触发弹窗显示逻辑。

修改后的完整代码 #

<!-- Pop up message -->
<link href="myhome/popup.css" rel="stylesheet" type="text/css">

<script>
$(document).ready(function () {
    // 检查本地存储是否有已看过弹窗的标记
    const hasSeenPopup = localStorage.getItem('hasSeenPopup');
    
    if (!hasSeenPopup) {
        // 第一次访问，执行弹窗显示逻辑
        $("#popup").hide().fadeIn(1000);
    }

    // 关闭弹窗的交互逻辑
    $("#close").on("click", function (e) {
        e.preventDefault();
        $("#popup").fadeOut(1000);
        // 存入标记，标记用户已看过弹窗
        localStorage.setItem('hasSeenPopup', 'true');
    });
});
</script>

额外小提示 #

• 如果希望弹窗在用户关闭浏览器后重新显示（会话级别的仅一次），可以把代码里的localStorage换成sessionStorage，逻辑完全一致；
• 测试时如果需要重置弹窗状态，可以打开浏览器控制台，执行localStorage.removeItem('hasSeenPopup')来清除存储的标记。

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