31 lines
2.0 KiB
Plaintext
31 lines
2.0 KiB
Plaintext
---
|
||
title: 描述cookie、 `sessionStorage` 和 `localStorage` 之间的差异。
|
||
---
|
||
|
||
LocalStorage 对于存储用户以后需要访问的数据很有用，例如离线数据，因为它把数据存储在浏览器和系统中。 即使用户关闭和重新打开浏览器，这些数据也将持续存在，并可被其他网站访问。
|
||
|
||
SessionStorage 是提高你的 Web 应用程序性能的一个好方法。 它在浏览器上本地存储数据，但特定于（并且只能由）各自的网站/浏览器标签访问，并且只有当用户在网站/标签上时才能使用。 由于限制性的访问，这是一个更安全的存储方法，并且由于减少了服务器和客户端之间的数据传输，促进了更好的网站性能。
|
||
|
||
对于存储不应长期保存的数据，如会话 ID，Cookies 是一个不错的选择。 Cookies 允许你设置一个过期时间，届时它将被删除。 与其他两种存储方法相比，Cookies 只能是较小尺寸的数据。
|
||
|
||
## 相似性
|
||
|
||
Cookies、`localStorage`和`sessionStorage`都是:
|
||
|
||
- 客户端的存储机制。 这意味着客户端可以阅读和修改这些值。
|
||
- 基于键值的存储。
|
||
- 他们只能存储作为字符串的值。 对象必须序列化为字符串 (`JSON.stringify()`) 才能存储。
|
||
|
||
## 差异
|
||
|
||
| 属性 | Cookie | `localStorage` | `sessionStorage` |
|
||
| --- | --- | --- | --- |
|
||
| 发起方 | 客户端或服务器。 服务器可以使用 `Set-Cookie` 头 | 客户端 | 客户端 |
|
||
| 有效期 | 手动设置 | 永久 | 标签关闭时 |
|
||
| 跨浏览器会话的持久性 | 取决于是否设置过期时间 | 是 | 否 |
|
||
| 每次 HTTP 请求都发送到服务器 | Cookie 会自动通过 `Cookie` 头发送 | 否 | 否 |
|
||
| 容量(每个域) | 4kb | 5MB | 5MB |
|
||
| 访问权限 | 任何窗口 | 任何窗口 | 部分标签页 |
|
||
|
||
还有其他客户端存储机制，如 [IndexedDB](https://developer.mozilla.org/en-US/docs/Web/ADI/IndexedDB_API)，比上述技术更强大，但使用起来更复杂。
|