当前位置：首页 > 文章列表 > 文章 > 前端 > JavaScript计算器历史记录实现方法

JavaScript计算器历史记录实现方法

2025-07-24 16:30:38 0浏览收藏

想要为你的计算器增加记忆功能吗？本文将详细介绍如何利用 JavaScript 的 LocalStorage 实现计算器历史记录功能。通过本文，你将学会如何使用 LocalStorage 保存用户最近输入的5个数字，并以类似队列的方式更新历史记录。我们将从HTML结构搭建入手，逐步讲解JavaScript代码的编写，包括如何从LocalStorage加载和保存数据，以及如何处理用户的数字输入。通过学习本文，你不仅能掌握LocalStorage的基本用法，还能将其应用到实际的Web开发场景中，为你的计算器应用增添实用功能。快来一起探索JavaScript的强大之处，打造更智能的计算器吧！

使用 JavaScript LocalStorage 实现计算器数字历史记录

本文将介绍如何利用 JavaScript 的 LocalStorage 功能，为计算器实现一个简单的数字历史记录功能。该功能可以保存用户最近输入的 5 个数字，并在每次输入新数字时，将最早的数字移除，从而实现一个类似队列的历史记录效果。通过本文的学习，你将掌握 LocalStorage 的基本用法，以及如何将其应用到实际的 Web 开发场景中。

使用 LocalStorage 存储计算器数字历史

LocalStorage 是 Web 浏览器提供的一种本地存储机制，允许 Web 应用程序在用户的浏览器中存储键值对数据。这些数据在浏览器关闭后仍然保留，直到被显式删除。这使得 LocalStorage 非常适合存储用户偏好设置、应用程序状态等数据。

对于计算器数字历史记录功能，我们可以使用 LocalStorage 来存储一个包含最近输入数字的数组。每次用户输入一个新数字，我们就将该数字添加到数组的开头，并移除数组末尾的数字（如果数组长度超过 5）。

实现步骤

HTML 结构:

首先，我们需要一个包含数字按钮的 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>

JavaScript 代码:

接下来，我们需要编写 JavaScript 代码来处理数字输入和 LocalStorage 的存储。

window.addEventListener("DOMContentLoaded", () => {
  // 从 LocalStorage 加载数字历史记录，如果不存在则创建一个空数组
  const arr = JSON.parse(localStorage.getItem("arr") || "[]");

  // 保存数字到 LocalStorage 的函数
  const saveNumber = (num) => {
    arr.unshift(num); // 将新数字添加到数组开头
    if (arr.length === 6) arr.pop(); // 如果数组长度超过 5，移除末尾的数字
    localStorage.setItem("arr", JSON.stringify(arr)); // 将数组保存到 LocalStorage
    console.log("Current History:", arr); // 打印当前历史记录
  };

  // 为计算器按钮添加事件监听器
  document.getElementById("calculator").addEventListener("click", (e) => {
    const tgt = e.target.closest("button.num"); // 获取点击的按钮元素
    if (!tgt) return; // 如果点击的不是数字按钮，则返回
    saveNumber(+tgt.textContent); // 将按钮的文本内容转换为数字并保存
  });
});

代码解释:

window.addEventListener("DOMContentLoaded", ...): 确保在页面加载完成后执行代码。
JSON.parse(localStorage.getItem("arr") || "[]"): 从 LocalStorage 中获取名为 "arr" 的数据。如果 "arr" 不存在，则使用空数组 [] 作为默认值。JSON.parse 将 JSON 字符串转换为 JavaScript 数组。
saveNumber(num): 该函数负责将数字保存到 LocalStorage。
- arr.unshift(num): 将新数字 num 添加到数组 arr 的开头。
- if (arr.length === 6) arr.pop(): 如果数组的长度达到 6，则移除数组末尾的元素，保持数组长度为 5。
- localStorage.setItem("arr", JSON.stringify(arr)): 将更新后的数组 arr 转换为 JSON 字符串，并将其保存到 LocalStorage 中，键名为 "arr"。
document.getElementById("calculator").addEventListener("click", ...): 为 calculator 元素添加点击事件监听器。
- e.target.closest("button.num"): 查找最近的父元素，该元素是具有 num 类的 button 元素。
- if (!tgt) return: 如果点击的不是数字按钮，则直接返回，不执行任何操作。
- saveNumber(+tgt.textContent): 将点击的按钮的文本内容（例如 "1", "2"）转换为数字（使用 + 运算符），然后调用 saveNumber 函数将其保存到 LocalStorage。

注意事项

LocalStorage 只能存储字符串数据。因此，我们需要使用 JSON.stringify 将数组转换为 JSON 字符串，再将其存储到 LocalStorage 中。读取数据时，需要使用 JSON.parse 将 JSON 字符串转换回 JavaScript 数组。
LocalStorage 的存储空间有限，通常为 5MB 到 10MB。因此，不适合存储大量数据。
用户可以清除浏览器的 LocalStorage 数据。因此，不要依赖 LocalStorage 存储关键数据。
console.log("Current History:", arr): 在实际应用中，你可以将历史记录显示在页面上，而不是仅仅打印在控制台中。

总结

通过本文的教程，你学习了如何使用 JavaScript 的 LocalStorage 功能来实现一个简单的计算器数字历史记录功能。你可以根据自己的需求，修改和扩展这个功能，例如，增加历史记录的长度，或者将历史记录显示在页面上。LocalStorage 是一个非常有用的 Web 存储机制，可以帮助你构建更丰富的 Web 应用程序。

今天关于《JavaScript计算器历史记录实现方法》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！