本文介绍如何利用浏览器本地存储（localstorage）实现无需用户注册、不依赖数据库的图片点赞功能，解决页面刷新后图标状态丢失的问题。
在静态网页中实现“点赞”并持久化状态，关键在于将用户操作记录在客户端本地，而非依赖服务器或数据库。对于初学者项目或仅作演示/个人收藏用途的网站，localStorage 是最轻量、易上手且零服务端配置的解决方案。
✅ 核心思路
- 每张图片用唯一标识（如 id=”img1″ 或 data-id=”123″）区分；
- 点击时切换图标样式（空心 ❤️ → 实心 ❤️），同时将该图片 ID 记录到 localStorage 中；
- 页面加载时，读取已点赞的 ID 列表，并为对应按钮自动添加“已点赞”样式。
? 示例代码（完整可运行）
⚠️ 注意事项与局限性
- 仅限当前浏览器+域名有效：localStorage 数据绑定于协议+域名+端口，换浏览器、清除缓存或访问不同子域名均会丢失数据；
- 无跨设备同步：点赞状态不会在手机、平板等其他设备上显示；
- 不适合生产级社交功能：无法防刷、无法统计真实用户数、无法关联用户行为——若需这些能力，必须引入后端（如 Node.js + SQLite / Firebase）和 Ajax 请求；
- 存储大小限制：通常约 5–10 MB，对数千张图片的点赞记录仍绰绰有余。
✅ 总结
对于“个人图库”“作品集展示页”或教学练习类项目，localStorage 是理想起点：零部署成本、语法简洁、即时生效。掌握它不仅能快速落地点赞功能，更是理解前后端职责分离的第一步。当你需要更健壮的数据管理时，再自然过渡到 Ajax + REST API + 数据库的组合方案即可。
