Web 存储 API 是一组由浏览器公开的 API，以便您可以在浏览器中存储数据。

存储在 Web 存储中的数据使用键/值对格式，并且这两个数据都将存储为字符串。

Web 存储 API 中引入了两种类型的存储：本地存储和会话存储。

在本文中，我将向您展示如何使用 Web 存储 API，以及为什么它对 Web 开发人员有用。

Web 存储 API 的工作原理

Web 存储 API 公开了一组对象和方法，可用于在浏览器中存储数据。您存储在 Web 存储中的数据是私有的，这意味着其他网站无法访问它。

在 Google Chrome 中，您可以通过打开开发人员工具窗口并转到“应用程序”选项卡来查看 Web 存储，如下所示：

web-storage-location-1Google Chrome 中的 Web 存储位置

在上图中，您可以看到“存储”菜单还具有其他存储类型，例如索引数据库、Web SQL 和 cookie。Web SQL 标准已被弃用，并且 IndexedDB 很少使用，因为它太复杂了。存储在 IndexedDB 中的任何数据最好存储在服务器上。

至于 cookie，它是一种更传统的数据存储机制，最多只能存储 4 KB 的数据。相比之下，本地存储容量为 10 MB，会话存储容量为 5 MB。

这就是为什么我们在本文中只关注本地存储和会话存储的原因。

本地存储和会话存储说明

本地存储和会话存储是 Web 存储 API 支持的两种标准机制。

Web 存储是特定于域的，这意味着存储在一个域 （netflix.com） 下的数据不能被另一个域（www.netflix.com 或 members.netflix.com）访问

Web 存储也是特定于协议的。这意味着您存储在站点中的数据将无法在站点下使用。http://https://

本地存储和会话存储之间的主要区别在于本地存储将永久存储您的数据。如果要删除数据，则需要使用可用方法或从“应用程序”选项卡中手动清除数据。

相比之下，存储在会话存储中的数据仅在页面会话期间可用。当您关闭浏览器或选项卡时，将删除该特定选项卡的会话存储。

Local 和 Session Storage 都可以分别通过变量 和 下的对象进行访问。接下来，让我们看看这些存储类型的方法和属性。windowlocalStoragesesionStorage

本地存储和会话存储的方法和属性

本地存储和会话存储具有相同的方法和属性。若要在本地存储中设置新的键/值对，可以使用对象的方法：setItem()localStorage

localStorage.setItem('firstName', 'Nathan');

调用 setItem（） 方法

如果您在浏览器中查看“本地存储”菜单，您应该会看到上述数据保存到存储中，如下所示：

本地存储集项目在本地存储中存储键/值对

您使用的密钥必须是唯一的。如果使用已存在的键设置另一个数据，则该方法会将以前的值替换为新值。localStoragesetItem()

若要从本地存储中获取值，需要调用该方法并传递保存数据时使用的密钥。如果密钥不存在，则将返回：getItem()getItem()null

const firstName = localStorage.getItem('firstName');console.log(firstName); // Nathanconst lastName = localStorage.getItem('lastName');console.log(lastName); // null

调用 getItem（） 方法

若要删除本地存储中的数据，请调用该方法并传递指向要删除的数据的密钥：removeItem()

localStorage.removeItem('firstName');

调用 removeItem（） 方法

该方法将始终返回 。当要删除的数据不存在时，该方法将不执行任何操作。removeItem()undefined

如果要清除存储，可以使用以下方法：clear()

localStorage.clear();

清除本地存储

该方法从您正在访问的存储对象中删除所有键/值对。clear()

本地存储和会话存储的属性

这两种存储类型都只有一个属性，即显示其中存储的数据量的属性。length

sessionStorage.setItem('firstName', 'Nathan');sessionStorage.setItem('lastName', 'Sebhastian');console.log(sessionStorage.length); // 2sessionStorage.clear();console.log(sessionStorage.length); // 0

访问会话存储的 length 属性

这就是您可以在 和 中访问的所有方法和属性。localStoragesessionStorage

如何在 Web 存储存储中存储 JSON 字符串

由于 Web 存储始终将数据存储为字符串，因此您可以将复杂数据存储为 JSON 字符串，然后在访问该字符串时将该字符串转换回对象。

例如，假设我想存储有关用户的以下信息：

const user = {

  firstName: 'Nathan',

  lastName: 'Sebhastian',

  url: 'https://codewithnathan.com',};

对象数据示例

首先，我可能会将数据存储为一系列键/值对，如下所示：

localStorage.setItem('firstName', user.firstName);localStorage.setItem('lastName', user.lastName);localStorage.setItem('url', user.url);

将对象放入本地存储

但更好的方法是将 JavaScript 对象转换为 JSON 字符串，然后将数据存储在一个键下，如下所示：

const user = {

  firstName: 'Nathan',

  lastName: 'Sebhastian',

  url: 'https://codewithnathan.com',};const userData = JSON.stringify(user);localStorage.setItem('user', userData);

使用 JSON.stringify（） 将对象转换为 JSON 字符串

现在，本地存储将只有一个键/值对，其值为 JSON字符串。您可以打开“应用程序”选项卡来查看以下内容：

存储为JSON将 JSON 字符串存储在本地存储中

需要数据时，按如下方式调用 and 方法：getItem()JSON.parse()

const getUser = JSON.parse(localStorage.getItem('user'));console.log(getUser);// {firstName: 'Nathan', lastName: 'Sebhastian', url: 'https://codewithnathan.com'}

检索和解析作为对象的 JSON 字符串

在这里，您可以看到数据作为常规 JavaScript 对象返回。

本地存储与会话存储 – 使用哪一个？

根据我的经验，是首选的 Web 存储机制，因为只要您需要，数据就会持续存在。当您不需要数据时，可以使用该方法将其删除。localStorageremoveItem()

sessionStorage仅当需要存储临时数据时才使用，例如跟踪是否已向用户显示弹出框。

但这也有待讨论，因为您可能不希望在用户每次登录 Web 应用程序时都显示弹出窗口，而只显示一次。在这种情况下，您应该改用。localStorage

我的经验法则是先使用，并在情况需要时使用。localStoragesessionStorage

使用 Web 存储 API 的好处

现在您已经了解了 Web 存储 API 的工作原理，您可以看到它有一些好处：

将数据存储在浏览器上可以减少向服务器请求一条信息的需要。这可以提高 Web 应用程序的性能。

简单的键/值对格式允许您存储用户首选项和本地设置，这些设置应在会话之间保留。

Web 存储 API 使用简单，仅提供几个方法和一个属性。使用 JavaScript 设置和检索数据非常简单

它有离线支持。通过在本地存储必要的数据，Web 存储使您的 Web 应用程序能够脱机工作。

Web 存储也是一个标准化的 API，这意味着您编写的代码可以在许多不同的浏览器中工作。

但是，当然，并非所有数据都应存储在 Web 存储 API 中。您仍然需要一个服务器数据库来保存对应用程序很重要的记录。

结论

Web Storage 是一个有用的 API，可让您从浏览器快速存储和检索数据。使用 Web 存储，您可以在访问应用程序时存储用户的首选项。

localStorage允许您永久存储数据，直到手动删除数据，而只要浏览器或选项卡打开，它就会一直存在。sessionStorage

使用 Web 存储 API 的一些好处包括减少服务器请求、离线支持和易于使用的简单 API。它也是标准化的，因此它可以在不同的浏览器上运行。