前言很多网站、H5 活动页面会有进入页面自动弹出提示弹窗的需求弹窗附带【今日不再提示】复选框勾选关闭后当天再次刷新页面不会重复弹出但是打开新标签页依然可以弹窗这里就需要区分localStorage和sessionStorage的存储特性。本文原生 JS 实现不使用任何框架包含自动判断弹窗是否展示、文本动态渲染、复选框控制 “今日不再提示”、两种本地存储的配合使用适合前端新手学习本地存储、弹窗交互逻辑。实现效果页面加载完成自动判断是否展示弹窗满足条件 → 弹窗显示不满足 → 弹窗隐藏弹窗内展示标题 文本内容复选框【今日不再提示】勾选复选框点关闭记录时间戳今天内再次打开页面不再弹出第二天自动恢复弹窗不勾选复选框点关闭仅当前标签页本次会话不再弹出新开标签页依旧会弹出弹窗知识点localStorage永久存储手动删缓存才消失我们用时间戳控制有效期sessionStorage仅当前标签会话有效关闭标签页就清空。完整源码!DOCTYPE html html langzh-CN head meta charsetUTF-8 title原生JS 开屏弹窗 今日不再提示/title style body { margin: 0; padding: 0; font-family: Microsoft YaHei, sans-serif; background-color: #f9f9f9; display: flex; justify-content: center; align-items: center; height: 100vh; } #box { display: none; /* 默认设置不显示 */ width: 320px; padding: 20px; background-color: white; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); position: relative; } .title { color: #e74c3c; font-size: 1.5em; margin-bottom: 15px; font-weight: bold; display: flex; justify-content: center; align-items: center; } #content { font-size: 14px; line-height: 1.6; color: #333; margin-bottom: 15px; padding: 10px; background-color: #f8f9fa; border-radius: 8px; } .checkbox-container { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 15px; font-size: 12px; color: #666; } .checkbox-container input { margin-right: 5px; } .btn { background-color: #8e44ad; color: white; border: none; padding: 10px 20px; font-size: 16px; border-radius: 8px; cursor: pointer; transition: background-color 0.3s; display: block; margin: 0 auto; } .btn:hover { background-color: #9b59b6; } /style /head body div idbox div classtitle圣诞快乐/div div idcontent/div div classcheckbox-container input typecheckbox iddontShowAgain /今日不再提示 /div button classbtn onclickbreakAlert()关闭/button /div script let content document.getElementById(content); //获取content 的div let obj { contents: 《救勒歌》是南北朝时期流传于北朝的乐府民歌一般认为是由鲜卑语译成汉语的诗作。此诗歌咏了北国草原壮丽富饶的风光抒写救勒人热爱家乡热爱生活的豪情。开头两句交代救勒川位于高耸云宵的阴山脚下将草原的背景衬托得十分雄伟。接着两句用“穹庐”作比喻说天空如蒙古包盖住了草原的四面八方以此来形容极目远望天野相接无比壮阔的景象。最后三句描绘了一幅水草丰盛、牛羊肥壮的草原全景图。有静有动有形象有色彩。全诗风格明朗豪爽境界开阔音调雄壮语言明白如话艺术概括力极强受到历代文论家和文学史论著的好评。对它的学术研究经久不衰。 }; //要添加的对象内容 content.innerHTML obj.contents; //将对象内容添加到content div中 实现动态渲染 //判断是否需要显示弹窗函数 let box document.getElementById(box); function shouldShowAlert() { let storedTime localStorage.getItem(times); let currentTime new Date().getTime(); if ((storedTime storedTime currentTime) || sessionStorage.getItem(status) 1) { return false; //返回给调用函数结果false } return true; } //if调用shouldShowAlert()函数判断是否显示弹窗 if (shouldShowAlert()) { box.style.display block; } //定义弹窗关闭函数 let dontShowAgain document.getElementById(dontShowAgain); //获取dontShowAgain checkbox function breakAlert() { //带有今日不再提示的函数 if (dontShowAgain.checked) { let tomorrow new Date(); tomorrow.setDate(tomorrow.getDate() 1); localStorage.setItem(times, tomorrow.getTime()); } else { localStorage.removeItem(times); } sessionStorage.setItem(status, 1); box.style.display none; } /script /body /html核心逻辑拆解1. DOM 与样式弹窗容器#box默认display:none隐藏满足条件才改成block展示。#content用来动态渲染文本内容文本放在 JS 对象里使用innerHTML渲染方便后端或者配置修改文案。复选框dontShowAgain用来标记用户是否勾选【今日不再提示】。2. 本地存储区别重点面试常问表格存储生命周期作用域本项目用途localStorage永久保存需要手动清除同源所有标签页共享保存明天 0 点的时间戳实现今日不再弹出sessionStorage当前标签会话关闭标签页自动清空仅限当前标签页标记本次打开页面已经关闭弹窗刷新当前页不再弹新开标签页不受影响核心逻辑 勾选关闭弹窗 → 存入 localStorage明天的时间戳。下次页面加载拿当前时间对比如果当前时间小于存储的时间戳代表还没到第二天不弹窗。 无论勾不勾选都会往 sessionStorage 存入 status1当前标签页刷新不会再次弹窗。3. 弹窗判断函数shouldShowAlert()function shouldShowAlert() { let storedTime localStorage.getItem(times); let currentTime new Date().getTime(); // 两种情况不弹窗①存储的过期时间当前时间今日已禁用弹窗②session标记本次会话关闭过弹窗 if ((storedTime storedTime currentTime) || sessionStorage.getItem(status) 1) { return false; } return true; }页面加载直接调用如果返回 true弹窗display:block显示。4. 关闭弹窗函数 breakAlert ()function breakAlert() { if (dontShowAgain.checked) { // 获取明天此刻的时间戳存入localStorage let tomorrow new Date(); tomorrow.setDate(tomorrow.getDate() 1); localStorage.setItem(times, tomorrow.getTime()); } else { // 不勾选则删除localStorage的时间记录 localStorage.removeItem(times); } // 标记当前会话弹窗已关闭 sessionStorage.setItem(status, 1); box.style.display none; }现有代码存在的缺陷 优化方案缺陷 1时间是 “24 小时制”不是自然日 0 点当前代码tomorrow.setDate(tomorrow.getDate() 1)是24 小时后失效。举例晚上 22 点关闭弹窗会到明天 22 点才恢复弹窗不是第二天 0 点。 ✅优化方案把时间设置为次日凌晨 0 点实现真正自然日。let tomorrow new Date(); tomorrow.setDate(tomorrow.getDate() 1); tomorrow.setHours(0,0,0,0); // 设置为凌晨零点缺陷 2弹窗没有遮罩层现在弹窗直接居中页面底层内容还能点击。正式项目建议增加黑色半透明遮罩防止底层交互。缺陷 3innerHTML 存在 XSS 风险当前用innerHTML渲染文本如果文案来源是后端接口不要直接使用 innerHTML优先使用innerText。缺陷 4没有做版本 / 缓存清理如果业务更新弹窗内容老用户本地缓存还存在看不到新弹窗。可以增加版本号校验版本不一致时清空存储强制弹窗。拓展业务场景活动公告弹窗、协议提示、活动规则弹窗每日签到提示、每日欢迎提示小程序 / H5 的开屏公告web 端同源存储逻辑通用知识点总结localStorage.setItem/getItem/removeItem永久本地存储以时间戳实现有效期。sessionStorage会话存储标签关闭自动消失。页面初始化自动执行判断逻辑控制弹窗显示隐藏。JS Date 时间对象通过时间戳对比来做定时过期功能。innerHTML 动态渲染页面内容适合文案配置化。注意存储都属于前端本地存储清除浏览器缓存后记录会丢失。重要业务逻辑不能依赖前端存储只能做体验优化。