本文将介绍如何使用 JavaScript 的 LocalStorage 实现一个简单的计算器历史记录功能。通过将用户输入的数字存储在 LocalStorage 中，并使用数组的 unshift 和 pop 方法，我们可以轻松地维护一个固定长度的历史记录，并在每次计算后更新它。
利用 LocalStorage 存储计算器历史
在开发计算器应用时，记录用户的计算历史是一个常见的需求。JavaScript 的 localStorage 提供了一种在浏览器端存储数据的简单方式，可以用来实现这个功能。
基本思路
- 初始化: 页面加载时，从 localStorage 中读取历史记录，如果不存在则创建一个空数组。
- 存储新数字: 当用户输入新的数字时，将其添加到历史记录数组的开头。
- 维护长度: 为了保持历史记录的长度固定，当数组长度超过限制时，移除数组末尾的元素。
- 更新 LocalStorage: 将更新后的历史记录数组存回 localStorage。
代码实现
以下是一个示例代码，展示了如何实现这个功能：
window.addEventListener("DOMContentLoaded", () => {
// 从 localStorage 加载历史记录，如果不存在则创建一个空数组
const arr = JSON.parse(localStorage.getItem("arr") || '[]');
// 保存数字的函数
const saveNumber = num => {
arr.unshift(num); // 将数字添加到数组开头
if (arr.length === 6) arr.pop(); // 如果数组长度超过 6，移除末尾的元素
localStorage.setItem("arr", JSON.stringify(arr)); // 将更新后的数组存回 localStorage
};
// 事件委托，监听计算器按钮点击事件
document.getElementById("calculator").addEventListener("click", (e) => {
const tgt = e.target.closest("button.num"); // 找到被点击的按钮
if (!tgt) return; // 如果点击的不是数字按钮，则返回
saveNumber(+tgt.textContent); // 将按钮上的数字保存到历史记录
});
});代码解释：
立即学习“Java免费学习笔记（深入）”；
- window.addEventListener("DOMContentLoaded", ...)：确保在页面加载完成后执行代码。
- JSON.parse(localStorage.getItem("arr") || '[]')：从 localStorage 中读取键为 "arr" 的数据，如果不存在，则使用空数组 [] 作为默认值。JSON.parse 用于将 JSON 字符串转换为 JavaScript 对象。
- arr.unshift(num)：将新的数字 num 添加到数组 arr 的开头。
- arr.length === 6：检查数组长度是否达到最大值（这里是 6）。
- arr.pop()：如果数组长度超过最大值，则移除数组末尾的元素。
- localStorage.setItem("arr", JSON.stringify(arr))：将更新后的数组 arr 转换为 JSON 字符串，并存储到 localStorage 中。JSON.stringify 用于将 JavaScript 对象转换为 JSON 字符串。
- document.getElementById("calculator").addEventListener("click", ...)：为 ID 为 "calculator" 的元素（这里是计算器容器）添加点击事件监听器。
- e.target.closest("button.num")：查找最近的具有 "num" 类的按钮元素，即被点击的数字按钮。
- +tgt.textContent：将按钮上的文本内容转换为数字。
HTML 代码示例：
注意事项
- 数据类型： localStorage 只能存储字符串类型的数据。因此，需要使用 JSON.stringify 将 JavaScript 对象转换为字符串，并使用 JSON.parse 将字符串转换回 JavaScript 对象。
- 存储限制： localStorage 的存储容量有限，通常为 5MB 左右。如果需要存储大量数据，建议使用其他存储方案，例如 IndexedDB。
- 安全性： 存储在 localStorage 中的数据可以被同一域名下的任何页面访问。因此，不建议存储敏感信息，例如密码。
- 浏览器兼容性： localStorage 在所有主流浏览器中都得到支持。
总结
通过使用 JavaScript 的 localStorage 和数组操作，我们可以轻松地实现一个计算器历史记录功能。这种方法简单易用，适用于存储少量数据。在实际应用中，需要注意数据类型转换、存储限制和安全性问题。 通过上述方法，可以轻松地为你的计算器添加一个实用的历史记录功能。
