可使用 localStorage 持久化保存计算器历史记录，以数组形式存储含 time、expr、result 的对象，运算后序列化存入并限制条数，页面加载时反序列化渲染，支持清空功能。
可以使用 localStorage 将每次计算器的运算表达式和结果保存为历史记录，页面刷新后仍可读取显示。关键在于序列化数据、合理组织结构、注意存储容量限制（通常 5MB 左右）。
1. 定义历史记录的数据格式
建议用数组存储每条记录，每条为对象，包含时间、表达式、结果：
[
{ "time": "2024-05-20T14:22:30", "expr": "12 + 8", "result": 20 },
{ "time": "2024-05-20T14:23:01", "expr": "100 / 4", "result": 25 }
]
这样便于排序、渲染和后续扩展（如添加是否出错、单位等字段）。
2. 执行运算后保存记录
在点击“=”或调用计算函数后，将本次结果推入历史数组并存入 localStorage：
立即学习“前端免费学习笔记（深入）”；
示例代码片段：
function saveToHistory(expr, result) {
const history = JSON.parse(localStorage.getItem('calcHistory') || '[]');
history.push({
time: new Date().toISOString(),
expr: expr,
result: result
});
// 可选：限制最多保存 50 条，避免溢出
if (history.length > 50) history.shift();
localStorage.setItem('calcHistory', JSON.stringify(history));
}
// 调用示例：saveToHistory('5 * 6', 30);
3. 页面加载时读取并显示历史
在页面初始化（如 DOMContentLoaded）时读取并渲染到历史区域（例如一个 <div id="history">）：<font color="#666"><pre class="brush:php;toolbar:false;">
function loadHistory() {
const history = JSON.parse(localStorage.getItem('calcHistory') || '[]');
const container = document.getElementById('history');
container.innerHTML = history
.map(item =>
`<div class="history-item"><span class="expr">${item.expr}</span> =
<span class="result">${item.result}</span><span class="time">(${new Date(item.time).toLocaleTimeString()})</span></div>`
)
.reverse() // 最新在最上方
.join('');
}
</pre></font><h3>4. 提供清空历史功能（可选但推荐）</h3>
<p>加一个按钮，点击后清除本地存储并刷新显示：</p>
<font color="#666"><pre class="brush:php;toolbar:false;">
document.getElementById('clear-history').addEventListener('click', () => {
localStorage.removeItem('calcHistory');
document.getElementById('history').innerHTML = '';
});
</pre></font><p>注意：<code>localStorage 是域内共享的，同一域名下所有计算器页面共用该记录，如有多个计算器需加前缀区分键名（如 'calcHistory-v2'）。
