Web Storage API：开发者浏览器数据指南 ... - Medium

当我们谈到 HTML 时，许多人首先想到的是一堆标签、元素和尖括号。然而，HTML 的功能远不止于此。在现代 Web 开发中，HTML 已经成为创建交互式和动态 Web 应用程序的核心基础。这一切的背后，离不开 HTML5 API 的支持，它为开发者提供了一整套强大的工具和功能，使得许多曾经难以实现的功能变得触手可及。

在本文中，我们将深入探讨 HTML5 API 的世界，了解它们的工作原理，并通过一些简单的代码示例来展示它们的实际应用。

常见的 HTML5 API 简介

HTML5 API（应用程序编程接口）是一组功能和工具，允许开发者与 Web 浏览器及设备的各种功能交互。以下是一些最常用的 HTML5 API 及其简要说明：

• Web Storage API：提供 localStorage 和 sessionStorage 两种机制，用于在用户设备上本地存储数据。
• 地理位置 API：允许 Web 应用程序访问用户的地理位置。
• 画布 API：提供 2D 绘图上下文，用于在浏览器中创建图形、动画和可视化效果。
• WebSockets API：实现客户端与服务器之间的实时通信。
• 音频和视频 API：包括 <audio> 和 <video> 元素，以及用于控制音频和视频内容的相关 JavaScript API。
• 文件 API：允许读取和操作用户设备上的文件。
• 拖放 API：支持元素之间的拖放交互。
• Web Workers API：通过后台运行脚本，实现多任务处理。
• 服务工作者 API：支持离线功能和网络请求拦截。
• 通知 API：允许 Web 应用向用户发送系统通知。
• 历史记录 API：支持动态客户端导航，无需刷新页面。
• Fetch API：现代化的网络请求方式，替代传统的 XMLHttpRequest。
• WebRTC API：实现浏览器之间的实时通信。
• IndexedDB API：提供客户端数据库，用于存储和管理大量结构化数据。
• 全屏 API：允许 Web 应用以全屏模式显示。
• 设备方向 API：访问设备传感器数据，响应设备的物理方向。

这些 API 只是 HTML5 提供的众多功能中的一部分。每个 API 都有其独特的用途，开发者可以利用它们构建功能丰富的 Web 应用程序。

Web Storage API 的应用

Web Storage API 是一种允许开发者在用户浏览器中本地存储数据的工具。它提供了两种存储方式：

1. localStorage：数据会在浏览器关闭后仍然保留，除非被明确删除。
2. sessionStorage：数据仅在会话期间有效，浏览器或标签页关闭后会被清除。

实用案例：主题模式切换

当我们访问某些网站时，通常会看到亮模式和暗模式的切换选项。用户可以根据个人喜好选择模式，并且即使关闭浏览器后再次访问，网站仍然会记住用户的选择。这种功能的实现正是得益于 Web Storage API，具体来说是 localStorage。

如何查看存储数据

1. 打开开发者工具，进入 应用程序 > 本地存储。
2. 在本地存储部分找到网站的 URL。
3. 点击 URL 后，可以在右侧面板中查看存储的键值对。

检查浏览器对 Web Storage 的支持

在使用 Web Storage API 之前，开发者需要确保浏览器支持该功能。以下是几种常见的检测方法：

使用 Try-Catch 方法

let localStorageSupported = true;
try {
  localStorage.setItem('test', 'value');
  localStorage.removeItem('test');
} catch (e) {
  localStorageSupported = false;
}

if (localStorageSupported) {
  // localStorage is supported
} else {
  // localStorage is not supported
}

使用 typeof 检测

if (typeof Storage !== "undefined") {
  // Storage is supported
} else {
  // Storage is not supported
}

使用特征检测

if ('localStorage' in window && window.localStorage !== null) {
  // localStorage is supported
} else {
  // localStorage is not supported
}

使用 localStorage 和 sessionStorage

以下是 Web Storage API 的常用操作：

存储数据

// 存储数据到 localStorage
localStorage.setItem("key", "value");

// 存储数据到 sessionStorage
sessionStorage.setItem("key", "value");// 示例
localStorage.setItem("theme", "light");
sessionStorage.setItem("theme", "dark");

获取数据

// 从 localStorage 获取数据
const theme = localStorage.getItem("theme");

// 从 sessionStorage 获取数据
const theme = sessionStorage.getItem("theme");

删除数据

// 从 localStorage 删除数据
localStorage.removeItem("theme");

// 从 sessionStorage 删除数据
sessionStorage.removeItem("theme");

清除所有数据

// 清除 localStorage 中的所有数据
localStorage.clear();

// 清除 sessionStorage 中的所有数据
sessionStorage.clear();

使用 Web Storage API 的注意事项

1. 存储限制：每个域的存储容量通常限制在 5-10MB。
2. 性能影响：存储过多数据可能会影响性能和用户体验。
3. 安全性：由于存储的数据可以被同一域的 JavaScript 访问，避免存储敏感信息。
4. 数据加密：如果需要存储关键数据，建议先对数据进行加密。

Web Storage API 是一种轻量级的客户端数据存储解决方案，适用于保存用户首选项、设置或最近浏览的项目等少量数据。

通过本文的介绍，希望您对 HTML5 API，尤其是 Web Storage API 有了更深入的了解。如果您有任何问题或反馈，欢迎在评论区留言！

原文链接: https://medium.com/@_piyushanand_/web-storage-api-a-developers-guide-to-browser-data-storage-46b50b99c1b4