sessionstorage和localstorage区别

定义：

• sessionStorage
  是 HTML5 提供的一种用于本地存储数据的方式，数据的生命周期仅限于 当前会话（即当前浏览器标签页或窗口）。当页面关闭或浏览器窗口关闭时，存储数据会被清除。

• localStorage
  是 HTML5 提供的另一种本地存储方式，数据具有 持久性，即使关闭浏览器，数据仍然会保留，除非手动清除或通过代码删除。

主要区别：

1. 存储周期

• sessionStorage:

  • 数据仅在页面会话期间可用。
  • 当页面或浏览器标签关闭后，数据会被清除。

• localStorage:

  • 数据持久存储，除非主动删除或清除浏览器缓存，否则不会失效。
  • 即使关闭浏览器或重启设备，数据仍然存在。

---

2. 作用范围

• sessionStorage:

  • 仅在当前标签页中有效。
  • 不同标签页之间无法共享数据，即使是同一域名下的页面。

• localStorage:

  • 在同一浏览器的同一域名下，所有页面共享数据。
  • 数据可以跨标签页和窗口。

---

3. 容量限制

• 两者通常都有存储限制，约 5MB（不同浏览器实现可能略有差异）。
• 如果超出限制，可能会抛出 QuotaExceededError 异常。

---

4. 数据存储方式

• 都是以 键值对（Key-Value） 的形式存储数据，值是字符串。
• 如果需要存储复杂数据（如对象），需要通过 JSON.stringify 和 JSON.parse 进行序列化和反序列化。

---

5. 应用场景

• sessionStorage:

  • 适合存储临时数据，如表单中间状态或单次用户会话数据。

• localStorage:

  • 适合存储长期需要的数据，如用户设置、登录信息（需注意安全性）。

---

6. 安全性

• 两者均不适合存储敏感信息（如密码），因为它们的数据可以被通过浏览器工具直接查看和修改。
• 对安全要求高的数据，应结合 HTTP-only Cookies 或服务端存储。

---

7. API 使用方式

两者的 API 使用相同，常见方法如下：

• setItem(key, value)：存储数据。
• getItem(key)：读取数据。
• removeItem(key)：移除指定数据。
• clear()：清除所有数据。

示例代码：

javascript
复制代码
// 存储数据
localStorage.setItem('key', 'value');
sessionStorage.setItem('key', 'value');

// 读取数据
const localValue = localStorage.getItem('key');
const sessionValue = sessionStorage.getItem('key');

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

// 清空存储
localStorage.clear();
sessionStorage.clear();