Web 应用中离线数据入门（第二部分）

在本系列文章中，我将探讨一些离线数据处理方案。第一部分探讨了如何判断用户是否离线或网络连接缓慢/不稳定。在这一部分，我们将探讨一些在用户离线时仍可访问的数据存储方案，以及如何为网络连接不稳定的用户缓存数据。首先，让我们存储少量相对简单的数据，并探讨如何使用localStorage来存储这些数据。

什么是 localStorage？

localStorage 的最大优点在于它既易于理解又易于使用。本质上，localStorage 是一个离线键值存储。sessionStorage与 API 相同的其他存储方式不同，localStorage 中的数据会在浏览器会话之间保持保存。因此，当用户离线时，它对于访问数据非常有用。

然而，它也有一些重要的局限性。例如，它只能存储字符串值，但这确实允许您存储序列化数据。此外，它是同步的。每个域名仅允许约 5MB 的存储配额（具体数值可能因浏览器而略有不同）。

如果超出配额会怎样？我没找到关于这个话题的最新文章，不过雷蒙德·卡姆登的这篇文章探讨了不同浏览器在这方面略有不同的表现。

localStorage 没有内置的数据保护机制——域上的任何 JavaScript 代码都可以访问它。事实上，您只需打开浏览器工具即可查看所有 localStorage 的纯文本值。您甚至可以通过控制台编辑任何值。这种不安全性导致一些人建议完全不要使用 localStorage。

尽管存在局限性，但 localStorage 仍然可用于存储简单的值，以便在应用程序离线时保持其状态。

localStorage 的 API 非常简单。您可以使用 `set` 语句设置一个项目setItem()，并使用 `get` 语句获取一个项目getItem()。

localStorage.setItem('keyName', value);

let myData = localStorage.getItem('keyName');

您还可以使用以下命令删除单个项目localStorage.removeItem('keyName')，或者使用以下命令清除域的所有 localStorage localStorage.clear()。

如果你想使用 localStorage 存储比简单字符串更复杂的内容，你需要对数据进行序列化和反序列化。

localStorage.setItem('complexData', JSON.stringify(data));
let complexData  = JSON.parse(localStorage.getItem('complexData'));

另外需要说明的是，您可以监听 localStorage 上的事件。这将返回一个StorageEvent包含已修改键及其新旧值详细信息的事件报告。此功能在进行更改的同一页面上不起作用——它实际上是让域上使用该存储的其他页面同步任何更改的一种方式。

为了更直观地展示这些概念，我创建了一个 CodePen 示例，它调用远程 API 来填充一个<select>包含饮品类型的列表。由于数据量相对较小，我将其缓存到 localStorage 中，这样即使用户离线，列表也能保持更新。如果用户从列表中选择某个项目，系统也会存储并保留该选择。

目前的演示非常简单，但在未来的版本中，我会利用这个选项从 API 获取更复杂的数据，并使用 IndexedDB 来存储和离线检索这些数据。顺便一提，看到 CodePen 上那么多令人惊叹的作品，我几乎都不好意思把这么丑的演示发上去。说设计不是我的强项，那真是太轻描淡写了。

我们已经看到，localStorage 提供了一个简单的 API，可以轻松地将某些类型的数据离线存储。正如前面提到的，它在功能和安全性方面都存在一些限制，您需要注意这些限制。但是，如果您需要离线存储大量复杂数据该怎么办呢？这就需要我们在本系列的下一部分中探讨 IndexedDB 了。