如何实现条件满足时仅向每个用户单次展示提示弹窗

现有代码问题 #

你当前的代码除了缺少单次展示控制逻辑外，还存在几处语法和逻辑错误会导致功能失效：

• 余额判断误用赋值运算符=，会直接修改变量值，无法完成条件对比，需使用严格相等运算符===
• Array.pop()方法不需要传入参数，现有写法.pop("pdf")属于无效调用
• 通过getElementById获取到的是DOM元素对象，不是元素内的余额文本，直接和字符串对比永远无法命中条件
• 未对文件后缀做明确判断，只要文件名带.就会通过校验，无法准确识别PDF文件

优化实现方案 #

核心思路是通过持久化存储记录用户的提示查看状态，只要用户已经看过该提示，后续无论是否满足触发条件都不再弹出。这里优先使用浏览器localStorage做本地持久化存储，无需后端接口即可实现“永久不重复展示”的效果，优化后完整代码如下：

function pdfZero(){
    // 已展示过提示直接终止逻辑，不做后续判断
    if (localStorage.getItem('hasShownPdfFreeTip')) return;

    const fileName = "myDocument.pdf";
    // 提取文件后缀并转小写，兼容.PDF等大写后缀格式
    const fileExtension = fileName.split('.').pop().toLowerCase();
    // 获取余额元素的文本内容，去除首尾空格避免格式干扰
    const balanceText = document.getElementById("userBal").textContent.trim();
    
    // 修正条件判断：严格匹配0余额、PDF后缀两个条件
    if (balanceText === '0.00$' && fileExtension === 'pdf'){
        const confirmResult = confirm('This is a complimentary free translation of your document for a first page only. Add money to order an entire document.');
        // 提示触发后立刻写入标记，后续访问永久生效
        localStorage.setItem('hasShownPdfFreeTip', '1');
        return confirmResult;
    }
}

补充说明 #

• 如果你需要做到即使用户清除浏览器缓存也不会重复弹出，可以把hasShownPdfFreeTip标记存在后端的用户账户表中，页面加载时先拉取用户的标记状态，判断逻辑和本地存储版本完全一致
• 标记写入时机放在弹窗触发后，避免条件命中但弹窗未正常弹出就被标记为已读的问题

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