HTML5 中的本地存储、会话存储、Web 存储、Web 数据库和 cookie

Posted 2023-03-05

【中文标题】HTML5 中的本地存储、会话存储、Web 存储、Web 数据库和 cookie

【英文标题】：Local Storage, Session storage, Web storage, web database and cookies in HTML5

【发布时间】：2011-07-20 21:28:08

【问题描述】：

这些概念有什么区别，我什么时候应该特别使用其中一个？此列表是否还包含相同一般概念的不同名称？

html5 本地存储 HTML5 会话存储 HTML5 网络存储 HTML5 网络数据库 Cookie

【参考方案1】：

如果您的用户位于欧洲，需要考虑的另一件大事是 Cookie 在欧洲是非法的。 https://www.sitepoint.com/europe-website-cookie-privacy-law/

【讨论】：

来自文章：“具体的技术并不重要。虽然 cookie 是一个明显的目标，但该法律适用于客户端存储、Flash cookie、图像跟踪器、浏览器指纹识别或任何用于识别的技术个人。”法律的要点是：未经个人同意，您不应该跟踪个人。 Cookie 完全没问题，只要它们对最终用途本身有用。

【参考方案2】：

我想补充更多信息： cookie 只能存储 4k 的数据 而localStorage 能够存储 5mb 的数据（取决于浏览器）

网站将在浏览器中保存 cookie，下次浏览器将发送 cookie 以及 http 请求以供服务器端使用。 Cookie 旨在与服务器一起使用。 使用localStorage，可以存储更多数据，但默认限制在客户端。

【参考方案3】：

HTML5 网络存储是新客户端数据存储选项的通用总称。

本地存储是持久的，并且范围仅限于域。目前通常会提到两种口味：

'default'：以名称/值对的形式存储内容 Web SQL（又名 Web 数据库）：使用 SQL 数据库

会话存储是非持久性的，仅作用于当前窗口。

Cookie 是执行上述所有操作的老派方式。存储每个域的名称/值对。

【讨论】：

值得注意的是，其中唯一保证可以跨浏览器工作的是cookies，而cookies不适合存储少量数据。例如，IE 和 Firefox 将不会实现 Web SQL，因为它与 SQLite 绑定得非常紧密（这意味着如果不指定 SQLite 就很难编写规范）。

【参考方案4】：

AFAIC：

每个 cookie 4k Cookie，每个域 5k 本地存储。 Cookie 的存在时间限制和存储只是客户端协议和域特定的数据箱。

【参考方案5】：

会话存储：会话存储是在用户执行单个事务的地方引入的，但可以同时在不同的窗口中执行多个事务。一旦我们关闭窗口，会话就会终止。

本地存储：本地存储是特定于域的，并被引入跨多个窗口。没有时间限制，如 Cookie，最多可存储 5MB 存储，如用户邮箱等....