29.cookie，localStorage，sessionStorage 的区别

webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage
cookie 是有时间限制的，根据生命期不同分成两种：会话 cookie 和持久 cookie；

• 如果不设置过期时间，则表示这个 cookie 的生命周期为从创建到浏览器关闭为止，只要关闭浏览器窗口，cookie 就消失了。这种生命期为浏览会话期的 cookie 被称为会话 cookie。会话 cookie 一般不保存在硬盘上而是保存在内存里。
• 如果设置了过期时间 (setMaxAge (606024))，浏览器就会把 cookie 保存到硬盘上，关闭后再次打开浏览器，这些 cookie 依然有效直到超过设定的过期时间。存储在硬盘上的 cookie 可以在不同的浏览器进程间共享，比如两个 IE 窗口。而对于保存在内存的 cookie，不同的浏览器有不同的处理方式。

区别：

1. 存储大小：

• Cookie：最大4KB
• localStorage：最大5MB
• sessionStorage：最大5MB

2. 生命周期：

• Cookie：可以设置过期时间，过期后自动删除；
• localStorage：除非主动删除，否则永久保存在本地；
• sessionStorage：仅在当前会话有效，关闭窗口或标签页时自动删除。

3. 与服务器的通信：

• Cookie：每次向服务器发送请求时都会自动携带在HTTP头中；Cookie附带在http请求上，数量过大，会导致每个http请求就非常庞大，造成性能浪费
• localStorage和sessionStorage：仅保存在客户端本地，不会自动发送给服务器。

4. API
   Cookie：
   

• document.cookie：用于设置和获取Cookie
• navigator.cookieEnabled：用于检测浏览器是否支持Cookie
  

import Cookie from 'js-cookie'
Cookie.set('name', 'zs')
Cookie.get('name')
Cookie.remove('name')

localStorage和seesionStorage：

• window.localStorage和window.sessionStorage：用于设置和获取本地存储的值
• localStorage.clear()和sessionStorage.clear()：用于清空本地存储

// 增加 localStorage 项
localStorage.setItem('myCat', 'Tom');
// 读取 localStorage 项
let cat = localStorage.getItem('myCat');
// 移除 localStorage 项
localStorage.removeItem('myCat');
// 移除所有
localStorage.clear();

--	存储大小	生命周期	与服务器通信	作用域
Cookie	<=4KB	可以设置过期时间，过期后自动删除（不设置，默认是到浏览器关闭）	每次向服务器发请求时都会自动携带在HTTP头中（Cookie附带在http请求上，数量过大，会导致每个http请求就非常庞大，造成性能浪费）	在所有同源窗口中都是共享的
localStorage	5MB	除非主动删除，否则永久保存在本地	仅保存在客户端本地，不会自动发送给服务器	在所有同源窗口中都是共享的
sessionStorage	5MB	仅在当前会话有效，关闭窗口或标签页时自动删除	仅保存在客户端本地，不会自动发送给服务器	当前窗口或标签页中，不同的页面无法共享同一份数据

共同点：

• 注意：Cookie、localStorage、sessionStorage都是以明文形式存储在客户端的浏览器中，不适合存储敏感信息

使用场景：

1. Cookie：可以用于存储用户的身份认证信息、购物车信息等（设计初衷用于维护HTTP状态，不用于存储数据）
2. localStorage和sessionStorage：主要用于在同一浏览器窗口下共享数据，比如表单数据、用户设置等。