html无法实现遗忘曲线提醒,必须依赖javascript计算时间点并结合notification、localstorage等api;data-属性仅存元数据,推荐用时间戳而非日期字符串;持久化应优先用localstorage并做好异常处理与兼容性兜底。

HTML里没法直接实现遗忘曲线提醒
浏览器本身不提供定时唤醒、后台通知或记忆建模能力,HTML只是静态结构描述语言,没有内置的“复习调度引擎”。所谓“按遗忘曲线安排提示”,必须靠 JavaScript 主动计算时间点,并结合浏览器 API(如 Notification、localStorage、setTimeout 或 service worker)来落地。纯 HTML 标签(比如 <time></time> 或自定义 data- 属性)只能存复习计划的元数据,不能触发行为。
用 data- 属性存复习时间点最轻量
适合小规模错题本(几十道题以内),把下次复习时间写进元素属性,后续由 JS 读取判断。不要用 id 或 class 存时间——语义不清、易冲突、难解析。
常见错误现象:data-next-review="2024-05-20" 看似合理,但 JS 比较日期时容易出错(字符串比较 vs Date 对象);更稳妥的是存时间戳:data-next-review="1716192000000"(毫秒级)。
- 使用场景:每次用户标记“已掌握”后,JS 计算下一次复习时间(比如 1 天 → 3 天 → 7 天 → 30 天),再写回
data-next-review - 参数差异:
data-interval="3"表示间隔天数,data-review-count="2"表示已复习次数,方便动态调整间隔 - 性能影响:DOM 上挂太多
data-属性无明显开销,但别在循环中反复dataset读写——缓存到数组里批量处理
localStorage 存复习状态比 DOM 属性更可靠
DOM 属性在页面刷新后还在,但一旦用户清缓存、换设备或用无痕模式就全丢。真正要持久化复习进度,得用 localStorage(或 indexedDB,但小项目没必要)。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML,微信编辑器可直接渲染,无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
容易踩的坑:localStorage.setItem('review_plan', JSON.stringify(plan)) 后没做异常捕获——当值超 5MB 或含函数/undefined 时会静默失败;另外,不同域名、http/https、www/non-www 都是隔离的存储空间。
- 使用场景:每道题用唯一
id(比如"q_1024")作为 key,value 是 {nextReview: 1716192000000,interval: 3,repetitions: 2 } - 兼容性影响:所有现代浏览器都支持
localStorage,但 Safari 在无痕模式下会抛QuotaExceededError,需兜底用内存对象临时存 - 别直接存 DOM 节点引用或 jQuery 对象——序列化会丢数据
浏览器通知需要用户明确授权且限制多
Notification.requestPermission() 只能调一次,拒绝后无法再次弹窗;而且桌面端通知可能被系统过滤,移动端基本不可用(iOS 不支持 PWA 推送)。别指望靠它准时提醒复习。
更现实的做法是:页面打开时,JS 扫一遍 localStorage 里的复习计划,把今天该复习的题目高亮或置顶;同时在页面右上角放个小红点计数器(document.getElementById('review-badge').textContent = overdueCount)。
- 使用场景:每天首次访问页面时检查,不是每分钟轮询——省电、省资源
- 性能影响:遍历几百条记录用
Object.values()+filter()就够,别用for...in遍历 localStorage(它还包含其他键) - 别依赖
setTimeout做长期倒计时(比如设 7 天后触发)——页面关了就失效;真要长周期,只能靠下次打开时检查时间戳
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










