如何实现弹窗仅对用户显示一次，刷新或浏览器回退时不重复展示？

你的弹窗代码缺少对用户已查看状态的持久化记录，且关闭按钮的选择器存在错误，以下是修正后的完整代码：

<div id="popup" style="display: none;">
     <div id="close">&times;</div>
MY CONTENT
</div>

<script type="text/javascript">
window.addEventListener("load", function(){
    // 检查localStorage中是否有弹窗已显示的标记
    const hasShownPopup = localStorage.getItem('popupShown');
    if (!hasShownPopup) {
        setTimeout(function open(event){
            document.querySelector("#popup").style.display = "block";
        }, 0);
    }
});

document.querySelector("#close").addEventListener("click", function(){
    // 修正选择器为id选择器#popup
    document.querySelector("#popup").style.display = "none";
    // 设置标记到localStorage，持久化记录弹窗已关闭
    localStorage.setItem('popupShown', 'true');
});
</script>

关键说明： #

• 用localStorage存储弹窗已显示的状态，该状态会一直保存在用户浏览器中，除非用户手动清除缓存或主动删除该标记。
• 页面加载时先判断localStorage中是否存在popupShown标记，只有不存在时才显示弹窗。
• 关闭弹窗时写入标记，确保后续刷新页面、返回站点都不再触发弹窗。
• 修复了关闭按钮的选择器错误：原代码使用类选择器.popup，但弹窗元素的id是popup，需改为id选择器#popup。

内容的提问来源于stack exchange，提问作者Güngör Arslantaş