本地点赞计数需用 localstorage按唯一id（如post-123）分别存储总次数（like:post-123）和状态（liked:post-123），加载时初始化并校验nan，点击前检查已点状态、禁用按钮、同步更新dom与storage，分享时仅可将当前数值拼入url hash或query参数。
点赞按钮怎么实现本地计数，不依赖后端？
直接用 localStorage 存储计数，页面加载时读取、点击时更新。关键不是“做出来”，而是避免重复点击刷数、页面刷新后数据错乱。
- 必须用唯一标识区分不同按钮（比如文章 ID 或 URL 片段），否则所有页面共用一个计数器
- 用
localStorage.getItem()读取前先检查是否为null或NaN，否则parseInt()会返回NaN，后续++还是NaN - 推荐用
JSON.parse(localStorage.getItem('like:post-123')) || 0初始化，比parseInt更安全 - 不要在
onclick行内写长逻辑，绑定事件监听更易维护和测试
如何防止用户反复点击同一个点赞按钮？
本地存储无法阻止用户手动清 localStorage，但至少得挡住误点和快速连点。核心是记录“这个用户是否点过”，不是只看计数。
- 存两个键：
like:post-123（总次数）和liked:post-123（布尔值，表示当前设备是否已点） - 点击时先查
localStorage.getItem('liked:post-123')，为'true'就直接 return，不递增 - 设样式反馈：点击后禁用按钮（
button.disabled = true）、加opacity: 0.6，视觉上明确“已响应” - 别用时间戳或随机数生成“防重”标识——没意义，本地无服务端校验，纯靠用户自觉
点击后怎么同步更新按钮文案和数字显示？
DOM 更新必须紧贴状态变更，且要处理初始渲染和后续交互的一致性。常见错误是只改了 storage 没改界面上的 textContent。
- 把计数显示元素用固定
id或data-like-target属性标记，例如：<span data-like-target="post-123">0</span> - 封装一个
updateLikeCount(id, count)函数，统一读取、更新 DOM 和 storage，避免散落三处逻辑 - 注意：如果按钮旁有“已赞”文字，也要同步切换，用
button.dataset.liked = 'true'+ CSS 类控制显隐，比操作 innerHTML 稳定 - 不要用
document.write或innerHTML +=，容易 XSS 且破坏已有事件绑定
分享链接时怎么带上当前点赞数？
本地计数无法被其他用户看到，所谓“分享带点赞数”只是把当前页面的数值拼进 URL hash 或 query 参数，属于示意性功能，不是真同步。
- 最轻量做法：点击分享按钮时，读取
localStorage.getItem('like:post-123')，拼成https://example.com/article#likes=42 - 如果要用 query 参数（如
?share_likes=42），需用location.origin + location.pathname + '?share_likes=' + count，避免污染原有参数 - 注意：URL 长度限制（通常 2000 字符以内），别把整个 storage dump 进去
- 别试图用
navigator.share()自动带数字——它不支持自定义文本字段，只能传 title/url/text，且兼容性有限（Chrome/Edge 支持，Safari 基本不支持）
真正麻烦的是多设备同步——本地存储天然隔离，同一用户换手机就归零。如果真需要跨端，就得上 service worker + 简单 API，那已经超出“本地”范畴了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
