HTML-sessionStorage 和 localStorage

sessionStorage 和 localStorage 是 HTML5 提供的两种客户端存储机制，它们都允许在浏览器中存储数据，但有一些关键的区别。以下是它们的主要区别：

1. 生命周期

• sessionStorage:
  • 数据仅在当前会话期间有效。当用户关闭浏览器标签页或窗口时，sessionStorage 中的数据会被清除。
  • 如果用户刷新页面，sessionStorage 中的数据仍然保留。
• localStorage:
  • 数据在浏览器关闭后仍然保留，除非用户手动清除浏览器缓存或通过代码删除。
  • 数据没有过期时间，可以长期存储。

2. 作用域

• sessionStorage:
  • 数据的作用域限定在当前浏览器标签页或窗口。即使在同一浏览器中打开多个标签页，每个标签页的 sessionStorage 都是独立的。
• localStorage:
  • 数据的作用域限定在当前域名下。同一域名下的所有页面共享同一个 localStorage，即使在不同标签页或窗口中。

3. 存储容量

• sessionStorage 和 localStorage:
  • 通常每个域名下的存储容量为 5MB 左右（具体大小可能因浏览器而异）。

4. 适用场景

• sessionStorage:
  • 适用于临时存储数据，例如在用户浏览网站期间需要保存的表单数据、页面状态等。
• localStorage:
  • 适用于需要长期保存的数据，例如用户偏好设置、登录状态、缓存数据等。

5. API 使用

• sessionStorage 和 localStorage 的 API 基本相同，常用的方法包括：
  • setItem(key, value): 存储数据。
  • getItem(key): 获取数据。
  • removeItem(key): 删除指定数据。
  • clear(): 清除所有数据。
  • key(index): 获取指定索引的键名。
  • length: 获取存储的数据项数量。

6. 安全性

• sessionStorage 和 localStorage 都不适合存储敏感信息，因为它们的数据是以明文形式存储在客户端，容易被恶意脚本或用户查看。

总结

• sessionStorage 适合存储临时数据，数据在会话结束后自动清除。
• localStorage 适合存储长期数据，数据在浏览器关闭后仍然保留。

sessionStorage VS localStorage 对比表