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

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

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

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

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

实现步骤

1. HTML 结构:

首先，我们需要一个包含数字按钮的 HTML 结构。例如：

立即学习“Java免费学习笔记（深入）”；

<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>

2. 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 LocalStorage 实现计算器数字历史记录的详细内容，更多请关注php中文网其它相关文章！