HTML5 localStorage可持久化保存计算器历史和输入状态。每次计算后将{expr,result}对象存入history数组并JSON序列化保存，页面加载时解析还原；“C”键同步清空DOM与localStorage；需注意仅支持字符串、容量限制及隐私模式兼容性。
HTML5 的本地存储（localStorage）可以轻松保存计算器的计算历史和最后输入的表达式，让用户在刷新或关闭页面后仍能恢复上次状态。关键在于把运算过程中的关键数据存进 localStorage，并在页面加载时读取还原。
保存计算历史和当前表达式
每次完成一次计算（比如点击“=”），就把结果和表达式存入 localStorage。推荐用数组形式存储多条记录，再转成 JSON 字符串保存：
- 定义一个 history 数组，每次 push 新的 { expr: "2+3", result: 5 } 对象
- 用 JSON.stringify(history) 转为字符串，存入 localStorage.setItem("calcHistory", ...)
- 同时保存当前输入框内容（如用户输到一半的 "12+4"）到 localStorage.setItem("calcInput", input.value)
页面加载时自动恢复状态
在 DOMContentLoaded 或 window.onload 中读取 localStorage 数据并填充界面：
- 用 localStorage.getItem("calcInput") 获取上次输入，赋给 input 元素的 value
- 用 JSON.parse(localStorage.getItem("calcHistory")) 还原历史数组，动态生成历史列表（如插入到 中）
- 若 localStorage 为空，就初始化空数组和空输入，避免解析 null 报错
处理清空与更新逻辑
“C”（清除）按钮不仅要清空屏幕，还要同步清理本地存储：
立即学习“前端免费学习笔记（深入）”；
- 点击“C”时，清空 input、清空 history 列表、重置 DOM 历史区域
- 调用 localStorage.removeItem("calcInput") 和 localStorage.removeItem("calcHistory")
- 也可提供“清除全部历史”独立按钮，只删 history 不动当前输入
兼容性与注意事项
localStorage 在所有现代浏览器中都支持，但需注意几点：
- 它只能存字符串，对象必须 JSON 序列化；数值、布尔值也会被自动转为字符串
- 单个域名下容量约 5–10MB，计算器完全够用；超出会抛出 QuotaExceededError
- 隐私模式下部分浏览器会禁用 localStorage，建议加 try-catch 包裹读写操作
- 不加密、不安全，切勿存敏感信息——计算器场景无此风险
不需要服务端、不依赖网络，仅靠几行 localStorage 操作，就能让计算器真正“记得你”。离线可用，重启不丢，对用户很友好。
