习惯打卡小应用的设计要点：从数据结构到热力图

用几百行前端代码就能做一个可用的习惯打卡工具。这篇整理几个设计上的关键点。

一、数据结构

最省事的做法是按日期存：localStorage 里存一个对象，key 是习惯 id，value 是日期字符串数组。判断今天是否打卡就是看数组里有没有今天的日期，连续天数则从今天往前逐日回查，遇到断点就停。

二、连续天数计算

从今天开始往前遍历，只要当天在记录里就加一，否则中断。注意要处理「今天还没打卡」的情况——此时应从昨天开始算，否则连续天数会瞬间归零，体验很差。

三、热力图

本周热力图本质是一个 7 列的网格，每格对应一天，有打卡就填充强调色。用 CSS Grid 铺 7 列，配合圆角和透明度，几十行样式就能出效果。

四、状态与渲染

所有操作（添加、打卡、删除）都只改数据，改完统一调用一次 render。这样逻辑单一，不会出现某处忘了刷新界面。

五、小结

习惯打卡这类工具的技术难点不在框架，而在细节：连续天数的边界、跨天的时间处理、localStorage 的兼容。把这几个点想清楚，单文件应用也能很好用。