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