最小应用概述

概述

在本节中，我们将学习如何使用原生 JavaScript 和 localStorage API 构建一个最小化的前端 Web 应用程序。我们的示例应用旨在管理书籍信息。在该应用中，我们将处理一种单一的对象类型 —— Book，如下图所示的类图：

示例数据

下表展示了 Book 模型类的示例数据：

使用场景

一个数据管理应用程序需要什么功能？这取决于我们希望它实现哪些操作！我们正在构建的应用应支持以下四个标准使用场景：

1. 创建：允许用户输入要添加到书籍记录集合中的书籍数据，以创建新的书籍记录。
2. 检索（或读取）：从数据存储中获取所有书籍，并以列表形式展示。
3. 更新：修改某本书籍记录的数据。
4. 删除：移除某本书籍记录。

这四个标准使用场景及其对应的数据管理操作，通常被概括为缩写 CRUD。

为了通过键盘和计算机屏幕输入数据，我们使用 HTML 表单。这些表单为 Web 应用程序提供了用户界面技术。

为了维护一组持久化数据对象，我们需要一种能够将数据对象以持久记录的形式保存在二级存储设备（如硬盘或固态硬盘）上的存储技术。

现代浏览器提供了两种这样的技术。其中较简单的一种称为 localStorage，另一种更强大的是 IndexedDB。对于我们的最小化应用程序，我们将使用 localStorage。