如何使用 Web 存储 API？

2025-05-25

如何使用 Web 存储 API？

在本文中，我们将探讨不同类型的 Web 存储，例如本地存储、会话存储，以及更确切地说是 Cookie。在浏览器中存储数据是一项相当简单的任务，但有三种不同的方法可以实现这一点，并且很难确定哪种存储选项最适合您的特定用例。我将介绍在用户浏览器中存储数据的所有三种不同方法，以便您可以选择最适合您的选项。

目录

什么是 Web 存储？

Web 存储是 HTML5 的一大特色。借助 Web 存储功能，Web 应用程序可以在客户端的浏览器中本地存储数据。它以键/值对的形式存储在浏览器中。Web 存储有时也称为 DOM 存储。

Cookie、本地存储和会话存储的用途是什么？

在深入探讨各种存储选项之间的诸多差异之前，我首先需要先介绍一下它们的用途。这三种存储方式都用于将信息存储在用户的浏览器中，即使在导航到您网站上的新页面后，用户仍然可以访问这些信息。这些数据还会保存到用户当前使用的浏览器中，因此，如果用户在 Chrome 中打开您的网站，系统只会将信息保存到用户当前设备​​上的 Chrome 浏览器中。这意味着，如果他们稍后在其他浏览器中打开您的网站，数据将不再存在。现在，让我们来了解一下每种存储方式之间的诸多差异。

比较

贮存 限制 支持的数据类型 到期
本地存储 每个浏览器每个应用 5MB 仅字符串，作为键值对 绝不
会话存储 仅受系统内存限制 仅字符串，作为键值对 关闭标签页后
曲奇饼 每个 Cookie 至少 4096 字节 文本文件（不确定） 它有到期日期（手动）

本地存储

本地存储是一种 Web 存储形式，可以长期存储数据。这可以是一天、一周，甚至一年。这取决于开发者的偏好。需要注意的是，本地存储仅存储字符串，因此，如果您希望存储对象、列表或数组，则必须使用 将它们转换为字符串JSON.stringify()。

存储数据

要使用本地存储设置数据，您只需使用setItem此函数接受两个字符串参数。第一个参数是名称，第二个参数是与该名称关联的值。您可以将其视为与 JSON 对象中的键值对非常相似。

localStorage.setItem("day", "monday");
Enter fullscreen mode Exit fullscreen mode

就这样，你就可以存储键/值对了。你不仅可以存储字符串，还可以将 JavaScript 数组或对象存储为字符串，让我们看看如何操作——

// Storing Object
const usesInfo = {
  name: "John",
  age: 34,
};
localStorage.setItem("user-info", JSON.stringify(userInfo));

// Storing Array
const languages = ["Python", "React", "Javascript", "Go"];
localStorage.setItem("languages", JSON.stringify(languages));
Enter fullscreen mode Exit fullscreen mode

该JSON.stringify()方法将 JavaScript 对象或值转换为 JSON 字符串，

读取数据

要从本地存储获取数据，只需调用该getItem方法即可。该方法接受一个参数，即键值对的名称，并返回该值。

我们正在读取刚刚在上一节中添加的数据

// Reading String
const name = localStorage.getItem("name");

// Reading Object
const userInfo = JSON.parse(localStorage.getItem("user-info"));

// Reading Array
const languages = JSON.parse(localStorage.getItem("languages"));
Enter fullscreen mode Exit fullscreen mode

该JSON.parse()方法解析 JSON 字符串，构造字符串描述的 JavaScript 值或对象

null如果找不到该键，则返回

删除数据

与前面的示例一样，从本地存储中删除数据只需调用一个方法即可。此方法removeItem接受一个参数，该参数是要删除的键值对的名称。

localStorage.removeItem("name");
Enter fullscreen mode Exit fullscreen mode

会话存储

在浏览器数据存储方面，会话存储是一种流行的选择。它使开发人员能够保存和检索不同的值。与本地存储不同，会话存储仅保留特定会话的数据。用户关闭浏览器窗口后，数据将被清除。

存储数据

会话存储与本地存储的工作方式相同。我们只需要使用sessionStorage对象 -

// Storing Key-Value Pairs
sessionStorage.setItem("day", "monday");

// Storing Object
const userInfo = {
  name: "John",
  age: 34,
};
sessionStorage.setItem("user-info", JSON.stringify(userInfo));

// Storing Array
const languages = ["Python", "React", "Javascript", "Go"];
sessionStorage.setItem("languages", JSON.stringify(languages));
Enter fullscreen mode Exit fullscreen mode

读取数据

读取数据也和本地存储一样。

// Reading String
const name = sessionStorage.getItem("name");

// Reading Object
const userInfo = JSON.parse(sessionStorage.getItem("user-info"));

// Reading Array
const languages = JSON.parse(sessionStorage.getItem("languages"));
Enter fullscreen mode Exit fullscreen mode

删除数据

删除数据也和本地存储一样。

sessionStorage.removeItem("name");
Enter fullscreen mode Exit fullscreen mode

曲奇饼

Cookie 通常是存储在您的网络浏览器中的小型文本文件。Cookie 最初用于存储您所访问网站的信息。但随着技术的进步，Cookie 可以追踪您的网络活动并检索您的内容偏好。

存储数据

为了将数据存储在 Cookie 中，您需要访问该document.cookie对象并将其设置为您的 Cookie。为此，您只需将其设置document.cookie为一个字符串，其中名称和值用等号分隔。

document.cookie = "name=Smith";
Enter fullscreen mode Exit fullscreen mode

这将创建一个包含 namename和 value 的Cookie Smith，但由于默认到期日期已过，此 Cookie 将过期。为了手动设置到期日期，我们需要将expiresUTC 日期值传递给键。我们还需要确保用分号将expireskey 和key 分隔开。name;

document.cookie = `name=Smith; expires=${new Date(9999, 0, 1).toUTCString()}`;
Enter fullscreen mode Exit fullscreen mode

这将创建一个有效期为 01/01/9999 的 cookie，本质上就像创建一个永不过期的 cookie。

读取数据

Cookie 稍微有点难，因为没有办法获取单个 Cookie。获取 Cookie 的唯一方法是通过访问document.cookie对象一次性获取所有 Cookie。

const cookie = document.cookie; // "name=Smith; username=John";
Enter fullscreen mode Exit fullscreen mode

它默认返回字符串，但正如你所知，在我们的代码中使用它有点困难，所以我们可以创建一个函数，它接受 cookie 并返回对象。让我们看看它在代码中是什么样子的。

// Covert String to Object
function cookiesToObject(cookie) {
  var output = {};
  cookie.split(/\s*;\s*/).forEach(function (pair) {
    pair = pair.split(/\s*=\s*/);
    output[pair[0]] = pair.splice(1).join("=");
  });
  return output;
}

// Getting Cookie Object
const cookieObject = cookiesToObject(document.cookie);
Enter fullscreen mode Exit fullscreen mode

来源 - Stack Overflow

删除数据

像往常一样，Cookie 的处理会稍微困难一些。要删除 Cookie，您需要重新设置 Cookie，但需要为其指定一个空值和一个过去的有效期。

document.cookie = "name=; expires=Thu, 01 Jan 1980 00:00:00 GMT";
Enter fullscreen mode Exit fullscreen mode

结论

虽然本地存储、会话存储和 Cookie 类似，但它们之间存在一些细微的差异，这赋予了它们各自独特的用例。除非您明确需要访问服务器上的数据，否则我建议始终使用会话存储或本地存储，因为使用本地存储和会话存储比 Cookie 更容易。

现在您可以通过给我买一杯咖啡来表示您的支持。😊👇

给我买杯咖啡

文章来源：https://dev.to/j471n/how-to-use-web-storage-api-3o28
Devto 翻译
PREV
我使用 HTML 和 CSS 制作了所有国家的国旗
NEXT
如何测试 GraphQL API？