使用 JavaScript LocalStorage 实现计算器历史记录功能-小浪学习网

使用 JavaScript LocalStorage 实现计算器历史记录功能

本文将介绍如何使用 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 代码示例：

<div id="calculator">   <button class="num">1</button>   <button class="num">2</button>   <button class="num">3</button>   <button class="num">4</button>   <button class="num">5</button>   <button class="num">6</button>   <button class="num">7</button>   <button class="num">8</button>   <button class="num">9</button>   <button class="num">0</button> </div>

注意事项

数据类型： localStorage 只能存储字符串类型的数据。因此，需要使用 JSON.stringify 将 JavaScript 对象转换为字符串，并使用 JSON.parse 将字符串转换回 JavaScript 对象。
存储限制： localStorage 的存储容量有限，通常为 5MB 左右。如果需要存储大量数据，建议使用其他存储方案，例如 IndexedDB。
安全性： 存储在 localStorage 中的数据可以被同一域名下的任何页面访问。因此，不建议存储敏感信息，例如密码。
浏览器兼容性： localStorage 在所有主流浏览器中都得到支持。