Cookie、sessionStorage和localStorage的区别详解

Cookie使用与特性

cookie存储在客户端，即用户的浏览器中。由于Cookie是通过HTTP请求头在服务器和浏览器之间传输的，因此它们的大小有限制，通常不超过 4KB。大多数浏览器限制在20个，有的可能50个。

cookie可以设置过期时间，从在浏览器的存储时开始计算时间。过期即被删除

cookie会在每次HTTP请求中发送到服务器，因此它们可以用于在客户端和服务器之间传递数据。这种特性使得Cookie成为处理用户身份验证和会话管理的常用机制。

cookie对于同一域名下的网站，可以共享Cookie数据

cookie适用于需要在客户端和服务器之间传递小量数据的场景，如身份验证和会话管理；

设置Cookie

function setCookie(name, value, days = 7) {  
  const expires = new Date();  
  expires.setTime(expires.getTime() + (days * 24 * 60 * 60 * 1000));  
  document.cookie = `${name}=${escape(value)};expires=${expires.toUTCString()};path=/`;  
}
function setCookie(存储值的名, 存储的内容, 设置的天数) {  
  // 获取当前时间
  const expires = new Date();  
  // 获取过期时间 当前时间+设置的天数
  expires.setTime(expires.getTime() + (天数 * 24 * 60 * 60 * 1000));  
  document.cookie = `${name}=${escape(value)};expires=${expires.toUTCString()};path=/储存的路径`;  
}

读取Cookie

// 使用特定方法解析
function getCookie(name) {  
  const value = `; ${document.cookie}`;  
  const parts = value.split(`; ${name}=`);  
  if (parts.length === 2) return unescape(parts.pop().split(';').shift());  
  return null;  
}

删除Cookie

// 设置一个过期的时间删除cookie
function deleteCookie(name) {  
  document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/`;  
}

sessionStorage使用与特性

sessionStorage也是存储在客户端的，但它是一个临时会话存储对象。sessionStorage没有严格的大小限制，但它仅在当前浏览器窗口或标签页中有效，并且当窗口或标签页关闭时，存储的数据会被自动删除

sessionStorage数据在页面会话期间保持有效，当页面会话结束（例如关闭浏览器窗口或标签页）时，数据会被清除。它提供了一种在单个会话中跟踪用户数据的方式。

sessionStorage不与服务器的通信。它们主要用于在客户端存储数据，以便在后续的页面请求或用户交互中使用。

sessionStorage数据在不同的窗口或标签页之间不共享

sessionStorage适用于在同一浏览器窗口或标签页中存储临时数据的场景

sessionStorage的使用

// 存储数据（myKey：存储名，myValue：存储内容）
sessionStorage.setItem('myKey', 'myValue');
// 读取数据
const 赋值参数 = sessionStorage.getItem('myKey');
// 删除数据
sessionStorage.removeItem('myKey');
sessionStorage.clear(); //清理所有数据

localStorage使用与特性

localStorage同样存储在客户端，并且提供了比Cookie更大的存储空间。一般来说，浏览器对localStorage的支持可以达到 5MB，这使得它可以存储更多的数据

localStorage存储的数据没有过期时间，它们会一直保留在浏览器中，直到被手动删除或清除缓存。

localStorage不与服务器的通信。它们主要用于在客户端存储数据，以便在后续的页面请求或用户交互中使用。

localStorage在整个浏览器实例中共享数据，无论打开多少个窗口或标签页，都可以访问到相同的localStorage数据。

localStorage则适用于需要在客户端长期存储大量数据的场景。

localStorage的使用

// 存储数据（myKey：存储名，myValue：存储内容）
localStorage.setItem('myKey', 'myValue');
// 读取数据
const 赋值参数 = localStorage.getItem('myKey');
// 删除数据
localStorage.removeItem('myKey');
localStorage.clear(); //清理所有数据