纯HTML仅支持静态展示和本地表单填写；要保存、计算或跨设备查看，必须引入JavaScript或后端——HTML本身不存储数据，localStorage或导出CSV才是实际方案。
怎么用 HTML + 表单记录身体围度数据
纯 HTML 能做身体数据页，但仅限「静态展示 + 本地表单填写」；想保存、计算或跨设备查看，必须加 JavaScript 或后端。别被“一文搞懂”误导——HTML 本身不存数据，localStorage 或导出 CSV 才是实际落地方案。
典型字段包括：日期、体重、胸围、腰围、臀围、臂围、大腿围，建议用 <input type="number"> 配 step="0.1" 支持小数，避免用户输错单位。
- 所有数值输入框加
required和min="0"，防止空提交或负值 - 日期用
<input type="date">，浏览器自动校验格式，比手动输yyyy-mm-dd更可靠 - 不要用
<input type="text">模拟数字输入——用户可能输 “62kg” 或 “58.5cm”，后续 JS 解析会崩
为什么 localStorage 是最简可行的持久化方案
不用服务器、不依赖网络，关页面再打开数据还在——这正是 localStorage 的价值。但它只存在当前浏览器，换手机或清缓存就丢，别当数据库用。
关键操作就三步：收集表单值 → 组成对象 → JSON.stringify() 存进 localStorage.setItem('bodyData', ...)。读取时用 JSON.parse() 还原，注意加 try/catch，因为手动删过 localStorage 或 JSON 格式损坏都会导致 parse 报 SyntaxError。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 每次提交前先
localStorage.getItem('bodyData')读旧数据，拼到数组末尾再存，实现“追加记录” - 别直接覆盖，否则上次录入就没了
- 数据量大了（比如超 200 条）要定期用
localStorage.removeItem()清理旧条目，iOS Safari 对单个域名限制约 5MB
用表格动态渲染历史记录时的 DOM 坑
把 localStorage 里的数组循环生成 <tr> 很简单，但容易忽略两件事：排序和空状态。
原始数据是按录入顺序存的，但人要看“最近一次”在最上面——得用 .sort((a, b) => new Date(b.date) - new Date(a.date)) 倒序；如果 localStorage 为空或解析失败，表格 tbody 里不能留空，得插一句 <tr><td colspan="7">暂无记录</td></tr>，否则页面出现空白表格头很诡异。
-
<table>必须有<thead>和<tbody>显式包裹，不然用 JS 动态插入<tr>到<table>直接子节点，部分老浏览器会重排错乱 - 每行数据的日期列建议用
<time datetime="2024-06-15">2024-06-15</time>，语义清晰且方便以后加 CSS 样式或筛选 - 别在循环里反复查
document.getElementById('recordTable')，提成变量复用，性能差不了多少但代码干净
导出 CSV 文件为什么比截图更靠谱
截图发给教练或自己归档，三个月后根本分不清哪行是哪天的数据。CSV 可被 Excel / Numbers / 任何表格软件打开，还能排序、画趋势线。
核心是构造字符串：用逗号分隔字段，换行符 \n 分隔行，中文字段用双引号包裹（如 "胸围"），防止含逗号的备注炸开列。最后用 Blob + URL.createObjectURL() 创建下载链接——注意 Chrome 对 Blob URL 有生命周期，点击后立即触发 revokeObjectURL，否则内存泄漏。
- 导出前检查数据是否存在，空数组就弹
alert('没有可导出的记录')，别静默失败 - 文件名建议带日期，如
body-data-20240615.csv，避免下载一堆 “download.csv” 分不清 - 别用
document.write或新开窗口写 CSV 内容——现代浏览器基本拦截，且移动端无效
真正难的不是写页面，是坚持录满 30 天看趋势。数据格式可以改，但中断一次，时间序列就断了。
