Quiz

描述cookie、 `sessionStorage` 和 `localStorage` 之间的差异。

Topics
Web APIsJavaScript
在GitHub上编辑

LocalStorage 对于存储用户以后需要访问的数据很有用,例如离线数据,因为它把数据存储在浏览器和系统中。 即使用户关闭和重新打开浏览器,这些数据也将持续存在,并可被其他网站访问。

SessionStorage 是提高你的 Web 应用程序性能的一个好方法。 它在浏览器上本地存储数据,但特定于(并且只能由)各自的网站/浏览器标签访问,并且只有当用户在网站/标签上时才能使用。 由于限制性的访问,这是一个更安全的存储方法,并且由于减少了服务器和客户端之间的数据传输,促进了更好的网站性能。

对于存储不应长期保存的数据,如会话 ID,Cookies 是一个不错的选择。 Cookies 允许你设置一个过期时间,届时它将被删除。 与其他两种存储方法相比,Cookies 只能是较小尺寸的数据。

相似性

Cookies、localStoragesessionStorage都是:

  • 客户端的存储机制。 这意味着客户端可以阅读和修改这些值。
  • 基于键值的存储。
  • 他们只能存储作为字符串的值。 对象必须序列化为字符串 (JSON.stringify()) 才能存储。

差异

属性CookielocalStoragesessionStorage
发起方客户端或服务器。 服务器可以使用 Set-Cookie客户端客户端
有效期手动设置永久标签关闭时
跨浏览器会话的持久性取决于是否设置过期时间
每次 HTTP 请求都发送到服务器Cookie 会自动通过 Cookie 头发送
容量(每个域)4kb5MB5MB
访问权限任何窗口任何窗口部分标签页

还有其他客户端存储机制,如 IndexedDB,比上述技术更强大,但使用起来更复杂。

在GitHub上编辑