区别•

  • 都是Web Storage API提供的存储机制，用于在客户端存储数据
  • 主要区别在于数据的持久性和存储时间

localStorage•

  • 持久性：数据存储在localStorage中是持久的，除非用户手动清除浏览器缓存或者通过js删除，否则数据不会过期。

  • 存储时间：数据会在浏览器关闭后依然保留，因此适用于需要长期保存的数据，如用户设置或者偏好。

  • 存储容量：大多数浏览器提供约5MB的存储空间。

  • 数据共享：数据在同一来源下的所有窗口和标签页之间共享。

  • 使用场景：保存用户设置、主题选择、语言偏好等长期数据。

具体方法

1
2
3
4
5
6
7
8
9
10
11
// 存储
localStorage.setItem("key", "value")

// 获取
const value = localStorage.getItem("key")

// 删除
localStorage.removeItem("key")

// 清除所有数据
localStorage.clear()

sessionStorage•

  • 持久性：数据存储在sessionStorage中是临时的，数据只会在当前会话（即当前浏览器窗口或标签页）中有效。当浏览器窗口或标签页关闭时，数据会被清除。

  • 存储时间：数据仅在浏览器窗口或标签页的生命周期内有效，适用于需要在短时间内保存的数据，例如表单数据或临时状态。

  • 存储容量：大多数浏览器提供约 5MB 的存储空间，与 localStorage 相同。

  • 数据共享：数据仅在同一标签页中共享。

  • 使用场景：暂时存储表单输入值或用户会话数据或临时的状态。

具体方法

1
2
3
4
5
6
7
8
9
10
11
// 存储
sessionStorage.setItem("key", "value")

// 获取
const value = sessionStorage.getItem("key")

// 删除
sessionStorage.removeItem("key")

// 清除所有数据
sessionStorage.clear()