localStorage 和 sessionStorage的区别

localStorage 和 sessionStorage 是浏览器提供的两种用于临时保存同一窗口（或标签页）数据的会话存储对象，它们的主要区别体现在数据有效期、作用域和存储大小上。以下是详细对比：

1. 数据有效期

• localStorage
  数据会永久存储，除非主动删除（例如通过JavaScript代码或用户清除浏览器缓存）。即使关闭浏览器或重启计算机，数据依然存在。
  示例：用户的主题偏好（如深色模式）、网站的登录状态等。

• sessionStorage
  数据仅在当前会话期间有效。当页面被关闭或刷新时，数据会被清除。如果打开新的标签页或窗口访问同一网站，sessionStorage 是独立的，数据不会共享。
  示例：表单填写过程中的临时数据、购物车中的商品列表（如果不需要跨会话保存）。

2. 作用域

• localStorage
  同源（相同协议、域名和端口）的所有窗口或标签页共享同一 localStorage 数据。例如，在一个标签页中保存的数据，可以在另一个标签页中访问。

• sessionStorage
  数据仅在当前标签页或窗口中有效。即使是同源的不同标签页，它们的 sessionStorage 也是相互独立的。
  注意：在浏览器的隐私模式（如Chrome的无痕模式）下，sessionStorage 的数据会在会话结束后立即清除。

3. 存储大小

• localStorage 和 sessionStorage
  通常都支持 5MB 的存储空间（不同浏览器可能略有差异），这比 cookie 的 4KB 大得多。

4. 数据类型

• 两者都只能存储 字符串。如果需要存储对象或数组，需要先使用 JSON.stringify() 序列化，读取时再用 JSON.parse() 反序列化。
  示例：

  // 存储对象
  localStorage