通过Cookie判断用户是否已查看过指定Div弹窗

Hey there! 我来帮你搞定这个只弹一次的提示框问题～ 考虑到你PHP基础一般、JavaScript几乎为零，我会给你两种简单易上手的方案，注释写得明明白白，你直接复制调整就能用 😊

这个方案不需要后端处理，直接把代码放到你的HTML页面里就行，完全不用懂JS逻辑，改个提示内容就好：

// 页面加载完成后自动执行
window.onload = function() {
    // 检查浏览器里有没有存过"alertShown"这个Cookie
    var hasShownAlert = document.cookie.indexOf("alertShown=true") !== -1;
    
    if (!hasShownAlert) {
        // 弹出你的提示框，把引号里的内容换成你要的提示文字
        alert("欢迎访问我的网站！请仔细阅读下方的使用说明哦～");
        
        // 设置Cookie，让浏览器记住已经弹过提示了，有效期设为365天（可以自己改天数）
        var expireDate = new Date();
        expireDate.setTime(expireDate.getTime() + (365*24*60*60*1000)); // 365天的毫秒数
        var expiresStr = "expires=" + expireDate.toUTCString();
        document.cookie = "alertShown=true;" + expiresStr + ";path=/";
    }
};

使用方法： #

把这段代码放到HTML文件的</body>标签前面，用<script>包裹起来就行，比如：

<!-- 页面其他内容 -->
<script>
// 上面的JS代码放这里
</script>
</body>

如果你用的是PHP页面，这个方案可以让后端也能识别用户是否看过弹窗，代码同样简单：

<?php
// 检查PHP端是否能获取到"alertShown"的Cookie
if (!isset($_COOKIE['alertShown'])) {
    // 如果没弹过，就输出JS代码弹提示框，同时设置Cookie
    echo '
    <script>
        alert("欢迎访问我的网站！请仔细阅读下方的使用说明哦～");
        // 前端设置Cookie，有效期365天
        var expireDate = new Date();
        expireDate.setTime(expireDate.getTime() + (365*24*60*60*1000));
        var expiresStr = "expires=" + expireDate.toUTCString();
        document.cookie = "alertShown=true;" + expiresStr + ";path=/";
    </script>
    ';
    // 同时后端也设置一个Cookie（可选，方便后续后端逻辑判断）
    setcookie('alertShown', 'true', time() + 365*24*60*60, '/');
}
?>

使用方法： #

把这段PHP代码放到你的PHP页面最顶部（比如index.php的开头），同样把提示框里的文字换成你需要的内容就行。

• path=/是让Cookie在整个网站生效，不然可能只在当前页面有效；
• 有效期可以自己调整，比如想让弹窗第二天再弹，就把365改成1；
• 如果用户手动清除了浏览器Cookie，弹窗会再次出现，这是正常现象～

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