点击按钮后计数不更新，需检查元素是否获取成功及脚本执行时机；计数刷新后归零需用 localStorage 持久化；防重复点击应禁用按钮并添加节流。
点击按钮后计数不更新？检查事件监听是否绑定成功
最常见的情况是 document.getElementById 拿到的元素为 null，或者脚本执行时机早于 DOM 加载完成。确保 JS 代码放在 </body> 前，或用 DOMContentLoaded 包裹：
- 确认按钮和计数显示元素都有正确的
id，比如按钮id="likeBtn"，数字显示id="likeCount" - 避免在
<head>中直接写未包裹的 JS —— 此时document.getElementById("likeBtn")返回null - 简单验证：在控制台手动执行
document.getElementById("likeBtn")，看是否返回元素对象
计数刷新了但页面一刷新就归零？需要本地持久化
纯前端实现默认不保存状态，刷新即重置。若只需单机记忆（非用户登录态），用 localStorage 最轻量：
- 读取：用
localStorage.getItem("likeCount")获取初始值，注意返回字符串，需parseInt() - 写入：每次点赞后调用
localStorage.setItem("likeCount", count) - 首次无值时设为
0，别漏掉默认分支：const count = parseInt(localStorage.getItem("likeCount")) || 0 - 不建议用
sessionStorage—— 关闭标签页就清空，不符合“点赞后保留”的直觉
多人同时点击导致重复加1？前端无法解决并发，但可防误点
真实场景中多个用户共用一个计数必须靠后端，但前端至少能防止用户手抖连点两次算两次：
Html To Pdf
下载
使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。
- 点击后立即禁用按钮：
btn.disabled = true，操作完成再恢复（哪怕只是模拟延迟） - 加个简单节流：记录上一次点击时间戳，
if (Date.now() - lastClick - 视觉反馈很重要：点击后把按钮文字临时改成 “已赞” 或加个
opacity: 0.7，让用户感知已响应 - 注意：这些只是体验优化，不能替代服务端幂等校验
为什么用 innerHTML 更新数字而不是 textContent？
两者都能改数字，但安全性和性能有差别：
立即学习“前端免费学习笔记（深入）”；
-
textContent更安全 —— 不解析 HTML，避免 XSS 风险；如果计数变量来自不可信源（比如 URL 参数），必须用它 -
innerHTML会触发重新解析 HTML，哪怕只塞纯数字也略慢；仅当你需要插入带样式的标签（如<span class="highlight">12</span>）才用 - 推荐统一用
element.textContent = count，简洁、安全、够快
复杂点在于「持久化+防抖+状态同步」这三者要一起考虑，单独实现任何一个都容易，但组合起来常有人漏掉 localStorage 初始化逻辑，或者节流没清上次定时器 —— 这些细节比功能本身更影响实际体验。
