medicine-reminder

About

一款轻量级、无需注册、开箱即用的每日用药提醒工具 🎯 缘起 作为一个经常忘记吃维生素的打工人，我意识到需要一个小工具来提醒自己按时服药。 市面上的医疗类应用太重、太复杂，还要注册登录 —— 我只是想简单地记录"今天有没有吃药"而已。 于是有了这个项目：「你今天吃药了吗？」 核心理念： ✅ 打开即用，无需注册 ✅ 数据存在本地，保护隐私 ✅ 界面简洁，一键打卡 ✅ 浏览器通知提醒 🛠️ 技术栈 | 层级 | 技术 | |------|------| | 前端 | HTML5 + CSS3 + Vanilla JS | | 存储 | LocalStorage | | 提醒 | Web Notification API | | 部署 | 静态文件（部署在 Cloudflare Pages） | 为什么选择纯前端？ 零后端依赖，成本最低 无需处理服务器安全和数据合规 用户数据完全私有，不上传任何服务器 📱 功能一览 核心功能 1. 每日打卡 — 一键标记"今天已服药"，再也不会忘记 2. 药物管理 — 添加/编辑/删除药物，设置提醒时间和剂量 3. 浏览器通知 — 定时推送服药提醒 4. 今日状态 — 打开页面就知道今天有没有服药 辅助功能 7天服药历史记录 服药依从性统计 响应式设计，支持移动端 🎨 界面设计 采用了紫色渐变为主色调，配合绿色（成功）和红色（未完成）的对比： css / 主色调 / background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); / 成功/已服用 / background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); / 未完成 / background: linear-gradient(135deg, #eb3349 0%, #f45c43 100%); 设计原则： 大按钮、高对比度，适合老年人 卡片式布局，层次分明 最大宽度 480px，移动端优先 💾 数据结构 json { "medicines": [ { "name": "维生素C", "time": "09:00", "dose": "1片" }, { "name": "钙片", "time": "21:00", "dose": "2粒" } ], "records": { "2026-03-27": ["维生素C", "钙片"], "2026-03-26": ["维生素C"] } } 所有数据保存在用户浏览器的 LocalStorage 中，永不上传。 🤔 遇到的技术挑战 1. 浏览器通知权限 很多用户首次使用时，会拒绝通知权限。需要优雅地处理降级场景： javascript // 请求通知权限 Notification.requestPermission().then(permission => { if (permission === 'granted') { // 可以发送通知了 } else { // 显示提示，引导用户手动开启 } }); 2. 跨日期的数据同步 用户可能在晚上 23:59 添加明天的药物，需要确保日期切换时数据一致。 3. LocalStorage 容量限制 虽然 LocalStorage 有 5-10MB 的限制，但对于纯文本的服药记录来说已经绑绑有余。 📂 项目结构 medicine-reminder/ ├── medicine-reminder.html # 主页面 ├── user.html # 用户页面 ├── login.html # 登录页面 ├── donation.html # 捐赠页面 ├── MVP-需求文档.md # 需求文档 └── headers # Cloudflare 部署配置 🚀 部署 项目已部署在 Cloudflare Pages，绑定域名后即可访问。 部署方式： bash 安装 wrangler CLI npm install -g wrangler 部署 wrangler pages deploy . 📈 后续规划 | 版本 | 功能 | |------|------| | V1.1 | 7天历史记录、依从性统计、数据导出 | | V2.0 | 用户体系、多设备同步、家人提醒 | 💡 总结 这款小工具虽然功能简单，但解决了一个真实的问题：帮助养成按时服药的习惯。 技术选型上，纯前端方案牺牲了一些"高级功能"（如多设备同步），换来了极低的开发和维护成本，以及用户对数据的完全掌控。这是一个典型的"够用就好"的产品决策。 如果你也有类似需求，欢迎直接使用或 Fork 二次开发！

Discovery history

1. 阮一峰周刊·用户投稿

   Mar 27, 2026 · 1 observations