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