cookie，storage，sesstion区别

cookie 和 sesstion 区别

1. cookie 数据存放在客户的浏览器上，session 数据放在服务器上。
2. cookie 不是很安全，别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺骗
   考虑到安全应当使用 session。
3. session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
   考虑到减轻服务器性能方面，应当使用 COOKIE。
4. 单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存 20 个
   cookie。

cookie 和 localStorage 的区别

1. cookie 数据始终在同源的 http 请求中携带(即使不需要)，即 cookie 在浏览器和服务器间来回传递
2. cookie 数据还有路径（path）的概念，可以限制。cookie 只属于某个路径下存储大小限制也不同，cookie 数据不能超过 4K，同时因为每次 http 请求都会携带 cookie，所以 cookie 只适合保存很小的数据，如回话标识。
3. localStorage 虽然也有存储大小的限制，但是比 cookie 大得多，可以达到 5M 或更大localStorage 始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie 只在设置的 cookie 过期时间之前一直有效，即使窗口和浏览器关闭。
4. 对于cookie
5. value 如果⽤于保存⽤户登录态，应该将该值加密，不能使⽤明⽂的⽤户标识http-only 不能通过 JS 访问 Cookie ，减少 XSS 攻击secure 只能在协议为 HTTPS 的请求中携带same-site 规定浏览器不能在跨域请求中携带 Cookie ，减少 CSRF 攻击

cookie的使用

document.cookie="userName = mavis "; // 设置一个cookie，这是新增，不会覆盖原有的cookie
document.cookie="userName = 2222 ";  // 修改之前的cookie值
document.cookie = "userName=mavis; userId = 023";// 设置两条cookie


假设document.cookie 得到所有的cookie为 "userName=mavis; userId = 023"
那么document.cookie.split('; ').map(v => v.split('='))// 用分号 + 空格 切割
上面得到结果为：[ ['userName','mavis'],['userId','023'] ]

document.cookie="userName = 2222 ";  // 修改之前的cookie值


// 获取时间 
var date = new Date(); 
date.setTime(date.getTime()+30*24*3600*1000); //将date设置为30天以后的时间 
//将userId和userName两个cookie设置为30天后过期 
document.cookie = "userId=23; userName=mavis; expires=" + date.toGMTString();

// 删除cookie  时间设置过去就行
var date=new Date();
date.setTime(date.getTime()-10000); //将date设置为过去的时间
document.cookie="userId=023; expires=" + date.toGMTString();

document.cookie="name=value; domain=.baidu.com"; 这样设置可使百度下的所有主机都可访问该cookie。

Path：指定路径可以获取cookie，如果是默认值/，则都可以获取
需要注意的是，只有在 domain 选项核实完毕之后才会对 path 属性进行比较。

// 某个请求的响应头的cookie信息
Set-Cookie: rememberMe=deleteMe; Path=/gw; Max-Age=0; Expires=Tue, 10-Oct-2023 01:46:49 GMT; SameSite=lax
Set-Cookie: AUTH_EXPIRE_TIME=100AFE6D62CED1782F8340466AD22371A3F33852593327BF02F1CF90896DF1BF;Max-Age=57600;domain=.paic.com.cn;path=/;HTTPOnly
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

localStorage 和 sessionStorage 的使用

localStorage.setItem('a','b')
localStorage.getItem('a')
localStorage.removeItem('a')
localStorage.clear()
1
2
3
4