如何使用JavaScript和LocalStorage实现HTML弹窗只显示一次

<!-- 弹窗容器，初始状态可以设置为隐藏 -->
<div id="newsletter-popup-form" style="display: none;">
    <h2>欢迎！请验证您的年龄</h2>
    <p>请输入您的年龄：</p>
    <input type="number" id="age-input" placeholder="您的年龄">
    <button id="submit-age">提交</button>
</div>

<!-- 页面其他内容 -->
<p>这是您的网站内容...</p>

// 获取弹窗和年龄输入框的DOM元素
const popup = document.getElementById("newsletter-popup-form");
const ageInput = document.getElementById("age-input");
const submitButton = document.getElementById("submit-age"); // 假设有一个提交按钮

// 页面加载时执行的逻辑
document.addEventListener('DOMContentLoaded', () => {
    // 检查 localStorage 中是否存在 'userAge' 键
    // 如果不存在，表示用户首次访问或未进行年龄验证，则显示弹窗
    if (localStorage.getItem("userAge") === null) {
        popup.style.display = "block"; // 显示弹窗
        // 可以在这里添加任何额外的弹窗初始化代码，例如使用第三方弹窗库的open方法
        // 比如：$.magnificPopup.open({ items: { src: "#newsletter-popup-form" }, type: "inline" });
    } else {
        // 如果 'userAge' 键存在，表示用户已经验证过，则隐藏弹窗
        popup.style.display = "none"; // 隐藏弹窗
    }
});

// 为年龄输入框添加事件监听器，当用户输入年龄并失去焦点或点击提交时更新 localStorage
if (ageInput) {
    // 示例：在输入框内容改变时更新 localStorage
    ageInput.addEventListener('change', (e) => {
        // 将用户输入的年龄存储到 localStorage
        localStorage.setItem('userAge', ageInput.value);
        console.log("年龄已存储到 localStorage:", ageInput.value);
        // 可以在这里添加关闭弹窗的逻辑，例如：popup.style.display = "none";
    });
}

// 示例：如果有一个提交按钮，可以在点击提交时处理并关闭弹窗
if (submitButton) {
    submitButton.addEventListener('click', () => {
        // 确保用户输入了内容，并将其存储
        if (ageInput.value) {
            localStorage.setItem('userAge', ageInput.value);
            console.log("年龄已通过提交按钮存储:", ageInput.value);
            popup.style.display = "none"; // 隐藏弹窗
        } else {
            alert("请输入您的年龄！");
        }
    });
}

// 如果弹窗没有特定的交互（例如，只是一个通知弹窗），
// 可以在弹窗显示后立即设置 localStorage 标识，并提供一个关闭按钮
// 示例：假设有一个关闭按钮
// const closeButton = document.getElementById("close-popup");
// if (closeButton) {
//     closeButton.addEventListener('click', () => {
//         localStorage.setItem('popupShown', 'true'); // 标记弹窗已显示
//         popup.style.display = "none";
//     });
// }

#newsletter-popup-form {
    display: none; /* 默认隐藏 */
    /* 其他弹窗样式，如定位、背景、Z-index等 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1000;
}