localStorage、sessionStorage和cookie的用法和区别

localStorage、sessionStorage和cookie的用法和区别

localStorage、sessionStorage和cookie都是浏览器提供的客户端存储机制，用于在用户本地保存数据。它们之间的主要区别在于作用域、生命周期以及是否自动随HTTP请求发送至服务器。

1. localStorage
   用法：

// 存储数据
localStorage.setItem('key', 'value');
// 获取数据
var value = localStorage.getItem('key');
// 删除单个数据
localStorage.removeItem('key');
// 清空所有数据
localStorage.clear();

特点与区别：
生命周期：永久存储，除非手动调用 clear 方法或用户清除浏览器缓存。
作用域：同源策略下，同一域名的所有页面都能访问到同一个localStorage对象中的数据。
存储大小：一般为5MB左右（具体视浏览器而定）。
数据传输：不会随HTTP请求自动发送给服务器，仅在客户端存储。

2. sessionStorage
   用法：

// 存储数据
sessionStorage.setItem('key', 'value');
// 获取数据
var value = sessionStorage.getItem('key');
// 删除单个数据
sessionStorage.removeItem('key');
// 清空所有数据
sessionStorage.clear();

特点与区别：
生命周期：会话期间有效，当浏览器窗口关闭后，该会话相关的sessionStorage数据会被清除。
作用域：同源策略下，同一浏览器窗口内的不同标签页可以共享sessionStorage的数据，但不同的窗口则无法共享。
存储大小：与localStorage相同，通常也是5MB左右。
数据传输：不随HTTP请求自动发送给服务器，仅在当前会话的浏览器客户端存储。

3. cookie

// 设置一个cookie
document.cookie = "key=value; expires=expirationDate; path=path; domain=domain; secure";
// 读取cookie（需要自己编写解析逻辑）
function getCookie(name) {
  var cookies = document.cookie.split(';');
  for (var i = 0; i < cookies.length; i++) {
    var parts = cookies[i].split('=');
    if (decodeURIComponent(parts[0]) === name) {
      return decodeURIComponent(parts[1]);
    }
  }
  return null;
}
// 删除cookie
document.cookie = "key=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

特点与区别：
生命周期：可以通过设置 expires 属性来指定过期时间，默认情况下，当浏览器会话结束时（即浏览器关闭）非持久化cookie将被删除；若设置了过期时间，则会在该时间点后失效。
作用域：通过 path 和 domain 属性控制其可见性，可以在同源策略下的多个路径或者子域名中共享。
存储大小：每个cookie的大小限制较小，通常为4KB左右。
数据传输：每次发起同源HTTP请求时，浏览器会自动把当前域下有效的cookie一同发送到服务器。

用法场景总结：
（1） 当需要跨页面、持久化的本地存储，并且数据不需要随着网络请求传递给服务器时，使用localStorage。
（2）如果只希望数据在当前会话内可用，一旦浏览器窗口关闭就清空数据，可选择sessionStorage。
（3）对于需要在服务器端进行状态管理（如维持登录状态），或者需要在客户端和服务端之间共享信息（例如购物车内容，但注意隐私和安全问题），应使用cookie，并根据需求设定有效期。