localStorage和sessionStorage

发表于 分类于 本文字数： 1.9k 阅读时长 ≈ 2 分钟

# 基本概念

localStorage 和 sessionStorage 都是 Web Storage API 的一部分，用于在客户端存储数据。它们都是键值对存储，可以存储字符串数据，也可以存储对象数据。

# 区别

localStorage 和 sessionStorage 的主要区别在于数据的生命周期。localStorage 的数据会一直存在，直到手动删除，而 sessionStorage 的数据在页面会话结束时会被清除。

# 作用域不同

  • sessionStorage 的作用域限定在当前会话（当前浏览器标签页或窗口）。
  • localStorage 的作用域是永久的，数据在不同会话（遵循同源策略）之间共享。

# 生命周期不同

  • sessionStorage 的数据在会话结束时被清除，即当用户关闭浏览器标签页或窗口时，sessionStorage 中的数据会被删除。
  • localStorage 的数据是持久化的，除非被显式清除，否则会一直保存在客户端。

# 存储大小不同

  • sessionStorage 的存储容量通常比 localStorage 小。一般来说，sessionStorage 的容量限制在 5MB 左右。
  • localStorage 的容量限制通常在 5MB 到 10MB 之间，不同浏览器可能会有所不同。

# 数据共享不同

  • sessionStorage 的数据在同一个浏览器标签页或窗口中共享，但不会跨标签页或窗口共享。
  • localStorage 的数据在同一个域名下的所有标签页和窗口中共享。

# 使用场景

  • sessionStorage 适用于存储需要在同一会话中共享的数据，例如用户的登录状态、表单数据等。当用户关闭浏览器标签页或窗口时，这些数据会被自动清除。
  • localStorage 适用于存储需要在多个会话中共享的数据，例如用户的偏好设置、购物车数据等。这些数据会一直保存在客户端，直到被显式清除。

# 使用方法

# localStorage

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

// 获取数据
var value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

// 清空所有数据
localStorage.clear();

# sessionStorage

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

// 获取数据
var value = sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

// 清空所有数据
sessionStorage.clear();

# 注意事项

  • localStorage 和 sessionStorage 的数据存储遵循同源策略，即只有在相同域名、相同协议和相同端口下的页面才能访问这些数据。

  • localStorage 和 sessionStorage 的数据存储是同步的，即调用 setItem 、 getItem 、 removeItem 和 clear 方法会立即生效，不会阻塞页面的渲染。因此，在调用这些方法时，需要注意不要在关键路径上使用它们，以免影响页面的性能。

  • localStorage 和 sessionStorage 的数据存储是字符串类型的，如果需要存储非字符串类型的数据，可以使用 JSON.stringify 和 JSON.parse 方法进行序列化和反序列化。

  • localStorage 和 sessionStorage 的数据存储是持久化的，即数据不会在页面关闭后自动清除。如果需要清除数据，可以使用 removeItem 或 clear 方法。

  • localStorage 和 sessionStorage 的数据存储大小有限制，一般为 5MB 左右，不同浏览器可能会有所不同。如果需要存储大量数据，可以考虑使用其他存储方式，如 IndexedDB。

  • localStorage 和 sessionStorage 的数据存储是安全的，即数据不会被第三方脚本访问。但是，如果页面中存在 XSS 攻击，攻击者可以通过注入恶意脚本访问这些数据。因此，在使用 localStorage 和 sessionStorage 时，需要注意不要存储敏感数据，以免造成安全风险。

  • localStorage 和 sessionStorage 的数据存储是可被浏览器清除的，如用户手动清除浏览器缓存、浏览器崩溃等。因此，在使用 localStorage 和 sessionStorage 时，需要注意数据的持久化和安全性。