本文将介绍如何利用 JavaScript 的 LocalStorage 功能，为计算器实现一个简单的数字历史记录功能。该功能可以保存用户最近输入的 5 个数字，并在每次输入新数字时，将最早的数字移除，从而实现一个类似队列的历史记录效果。通过本文的学习，你将掌握 LocalStorage 的基本用法，以及如何将其应用到实际的 Web 开发场景中。
使用 LocalStorage 存储计算器数字历史
LocalStorage 是 Web 浏览器提供的一种本地存储机制，允许 Web 应用程序在用户的浏览器中存储键值对数据。这些数据在浏览器关闭后仍然保留，直到被显式删除。这使得 LocalStorage 非常适合存储用户偏好设置、应用程序状态等数据。
对于计算器数字历史记录功能，我们可以使用 LocalStorage 来存储一个包含最近输入数字的数组。每次用户输入一个新数字，我们就将该数字添加到数组的开头，并移除数组末尾的数字（如果数组长度超过 5）。
实现步骤
- 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>
- 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 应用程序。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
