数据存储与检索

介绍

在这个实验中，我们将跟随 Alex，一位在繁忙的科技初创公司中充满决心的 Web 开发者，他现在正踏入数据持久化的领域。在成功创建了一个用于跟踪和显示个人财务追踪器中财务记录的机制后，接下来的挑战是确保这些记录在浏览器会话之间持久保存。目标是让用户能够返回应用程序并找到他们之前输入的所有数据完好无损，从而提升应用程序的可用性和用户满意度。这个任务将向 Alex 介绍 Web 存储的概念，特别是利用 localStorage API 来保存和检索应用程序的状态。

在本实验中，你将学习如何使用 localStorage 将数据存储在用户的浏览器中，从而实现 Web 应用程序中的数据持久化。

知识点:

• localStorage 的使用
• JSON 序列化和反序列化 (JSON.stringify, JSON.parse)

Skills Graph

LocalStorage

localStorage 提供了一种在客户端存储会话数据的机制，存储限制通常为 5MB 左右。与会话存储 (sessionStorage) 不同，localStorage 中的数据在会话结束时不会消失。

存储数据

setItem() 方法允许你将数据存储在 localStorage 中。该方法接受两个参数：键（key）和值（value）。

例如：

localStorage.setItem("username", "Alice");

检索数据

getItem() 方法用于从 localStorage 中读取数据。该方法接受一个参数：键（key）。

例如：

localStorage.setItem("username", "Alice");
let username = localStorage.getItem("username");
console.log(username); // Outputs: Alice

将记录保存到 LocalStorage

在这一步中，你将与 Alex 一起实现一个功能：每当添加新记录时，将财务记录数组保存到 localStorage 中。这确保了用户的数据会存储在其设备本地，即使浏览器关闭或刷新后，数据仍然可用。

在 script.js 的开头，定义 addFinancialRecord 函数之前，添加以下代码以从 localStorage 加载已保存的记录并初始化 financialRecords 数组：

修改 script.js 以从 localStorage 加载记录：

document.addEventListener("DOMContentLoaded", function () {
  let records = JSON.parse(localStorage.getItem("records")) || [];
});

• JSON.parse() 静态方法用于解析 JSON 字符串，构造由字符串描述的 JavaScript 值或对象。可以提供一个可选的 reviver 函数，在返回结果对象之前对其进行转换。

实现记录持久化

在 addRecord 函数中添加逻辑，将记录存储到 localStorage 中：

document.addEventListener("DOMContentLoaded", function () {
  const saveRecords = () => {
    localStorage.setItem("records", JSON.stringify(records));
    renderRecords();
  };

  const addRecord = (description, amount, type) => {
    records.push({ description, amount, type });
    saveRecords();
  };
});

现在，每次添加新的财务记录时，它都会被保存到 localStorage 中，从而确保数据的持久化。

接下来，我们需要实现记账的删除功能。在编写删除函数之前，我们需要学习一个新的数组操作方法。

Splice 方法

splice() 方法可以接受三个参数：起始位置、要删除的元素数量以及要添加的新元素。

语法：

array.splice(start, deleteCount, item1, item2, ...)

• start：开始修改数组的索引。
• deleteCount：要删除的元素数量。如果不需要删除元素，则应为 0。
• item1, item2, ...：要添加到数组中的新元素。

删除元素

要从数组中删除元素，只需设置 deleteCount 参数，而无需添加新元素。

let fruits = ["Apple", "Banana", "Cherry", "Date"];
fruits.splice(1, 2); // 从索引 1 开始删除 2 个元素
console.log(fruits); // 输出: ['Apple', 'Date']

添加元素

splice() 还可以在数组的特定位置添加元素而不删除任何元素。将 deleteCount 设置为 0 并指定要添加的元素。

let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(2, 0, "Date"); // 在索引 2 处添加 'Date'
console.log(fruits); // 输出: ['Apple', 'Banana', 'Date', 'Cherry']

替换元素

通过设置 deleteCount 并添加新元素，splice() 可以同时删除和添加元素，从而实现替换。

let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(1, 1, "Date"); // 将索引 1 处的 1 个元素替换为 'Date'
console.log(fruits); // 输出: ['Apple', 'Date', 'Cherry']

添加删除记录的功能

添加删除记录的功能。

在 script.js 文件中编写以下代码：

document.addEventListener("DOMContentLoaded", function () {
  window.deleteRecord = (index) => {
    records.splice(index, 1);
    saveRecords();
  };
});

总结

在这个实验中，你和 Alex 一起解决了个人财务跟踪应用中的数据持久化挑战。通过学习使用 localStorage API，你让应用能够在浏览器会话之间保存和检索财务记录，从而显著提升了用户体验。这次对 Web 存储的入门为你打开了创建更复杂、更用户友好的 Web 应用的新可能性。

通过动手实践，你已经了解了如何使用 JSON.stringify 将数据序列化为字符串格式进行存储，然后使用 JSON.parse 将其反序列化为 JavaScript 对象进行检索。这一过程对于管理客户端 Web 开发中的应用状态至关重要，是一项基础技能，将有助于你未来的 Web 开发项目。