本文将介绍如何利用 JavaScript 的 LocalStorage 功能，为计算器实现一个简单的数字历史记录功能。该功能可以保存用户最近输入的 5 个数字，并在每次输入新数字时，将最早的数字移除，从而实现一个类似队列的历史记录效果。通过本文的学习，你将掌握 LocalStorage 的基本用法，以及如何将其应用到实际的 Web 开发场景中。
使用 LocalStorage 存储计算器数字历史
LocalStorage 是 Web 浏览器提供的一种本地存储机制，允许 Web 应用程序在用户的浏览器中存储键值对数据。这些数据在浏览器关闭后仍然保留，直到被显式删除。这使得 LocalStorage 非常适合存储用户偏好设置、应用程序状态等数据。
对于计算器数字历史记录功能，我们可以使用 LocalStorage 来存储一个包含最近输入数字的数组。每次用户输入一个新数字，我们就将该数字添加到数组的开头，并移除数组末尾的数字（如果数组长度超过 5）。
实现步骤
- HTML 结构:
首先，我们需要一个包含数字按钮的 HTML 结构。例如：
立即学习“Java免费学习笔记（深入）”；
这套系统是之前为一个朋友开发的一套游戏币交易系统，开发语言asp+javascript 数据库是Access。现在提供免费下载给新人学习,请不要用于商业用处。大分类为：商品管理现金转虚拟币管理 虚拟币转现金管理 历史转换记录 ID搜索虚拟币管理用户管理前台用户管理 被停权的会员 后台管理员添加 后台用户员管理 数据表备份分类管理游戏名称管理 服务器名管理数据统计查询交易类型数据信息管理修改重要公告
- 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 应用程序。
