JavaScript IndexedDB 完整指南

JavaScript IndexedDB 实战教程

最新推荐文章于 2025-08-26 08:25:20 发布

原创

最新推荐文章于 2025-08-26 08:25:20 发布 · 490 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #服务器 #开发语言

本文是 JavaScript IndexedDB 的全面指南，介绍如何在浏览器中存储数据，尤其是对于离线工作的渐进式 web 应用程序。文中通过实例展示了 IndexedDB 的使用，包括创建数据库、存储数据、查询数据等，并讨论了性能和兼容性问题。IndexedDB 提供了强大的异步文档数据库，但并非所有浏览器都支持，且不应作为主要数据存储。

JavaScript IndexedDB 完整指南

本文将通过一个小教程向你介绍 IndexedDB，并将 IndexedDB 与其他可用选项进行比较。IndexedDB 用于在浏览器中存储数据，对于需要离线工作的 web 应用程序（如大多数进步的 web 应用程序）尤其重要。

首先，让我们介绍一下为什么需要将数据存储在 web 浏览器中。数据在 web 应用程序中无处不在——用户交互创建数据、查找数据、更新数据和删除数据。如果没有存储这些数据的方法，就不可能允许用户交互跨多个 web 应用程序的使用保持状态。你通常会使用 MySQL、Postgres、MongoDB、Neo4j、ArangoDB 等数据库来处理这些存储，但如果你希望应用程序脱机工作呢？

这在不断发展的 web 应用程序中尤为重要，这些应用程序复制了原生应用程序的感觉，但却位于浏览器中。这些渐进的 web 应用程序必须离线工作，因此需要一个存储选项。幸运的是，有几种关于如何在浏览器中存储数据的工具，可以在线和离线访问数据。

1. 浏览器存储方式

关于如何在浏览器中存储数据，Web 标准提供了三个主要 API：

Cookies：此数据存储在浏览器中，Cookies 的大小限制为 4k。通常当服务器响应一个请求时，它们可能包含一个 SET-COOKIE 头，给浏览器一个要存储的键和值。然后，客户端应该在未来的请求头中包含这个 cookie，这将允许服务器识别浏览器会话等。这些 cookie 通常具有 HTTP-Only 属性，这意味着不能通过客户端脚本访问 cookie。这使得 cookie 不是保存脱机数据的好选择。
LocalStorage/SessionStorage：LocalStorage / SessionStorage是浏览器内置的键值存储，其中每个键的大小限制为 5MB。LocalStorage 存储数据，直到删除为止，而 sessionStorage 将在浏览器关闭时清除自己。除此之外，它们的 API 是相同的。可以使用 window.localStorage.setItem("Key", "Value") 添加键值对。并使用 window.localStorage.getItem("Key") 检索一个值。注意， LocalStorage API 是同步的，因此使用它会阻塞浏览器中的其他活动，这可能是一个问题。你可以阅读 JavaScript LocalStorage 完整指南了解更多关于 LocalStorage 的信息。
IndexedDB：一个内置在浏览器中的完整文档数据库，没有存储限制，它允许你异步访问数据，这对于防止复杂操作阻塞呈现和其他活动非常有效。这就是我们将在下面深入讨论的内容。

在这些方式中，localStorage 是进行简单操作和存储少量数据的好选择。对于更复杂或常规的操作，IndexedDB 可能是更好的选择，特别是在需要异步获取数据的情况下。

IndexedDB API 比 LocalStorage API 更复杂。所以，让我们用 IndexedDB 构建一些东西，让你更好地感受它是如何工作的！

2. 使用案例

创建一个新的 HTML 文件，我们称之为 index.html，内容如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>IndexedDB Todo List</title><style> body {text-align: center;}h1 {color: brown;} </style>
</head>
<body><main><h1>IndexedDB Todo-List</h1><div id="form"><input type="text" placeholder="new todo here"><button>Add Todo&l