localStorage 与 sessionStorage / cookie 和 session每次访问都要发送cook

localStorage、sessionStorage 这两个都是html5的新特性，用于存储数据，存在于浏览器端中

cookie 和 session都是用来跟踪浏览器用户身份用

一般会设置过期时间，存在于硬盘内存中，关闭浏览器如果没过期数据也仍会存在，如未设置，则生命周期随浏览器关闭而结束
保存在浏览器端
以文本的方式保存字符串，大小不能超过4k
由于可能会面临cookie欺骗，cookie截获等，所以安全性相对更低
每次访问都要发送cookie给服务器，浪费带宽。并且用户可以禁用cookie，会导致无法按照预期交互
cookie有路径的概念，可以限制其路径（需要进一步了解）
用于判断用户是否登陆过该网站，可以自动登录或者记住密码
保存上次的登录时间以及登录页面
常用的阅读人数等可以根据这个进行如下，为cookie浏览器的相关字段
Name

Cookie 的名称
Value

Cookie 的值
Domain

作用域。域名只能为一个，不能有多个。但是域名分带点以及不带点，不带点，那么只能在当前域名下获取 Cookie；带点，那么可以在这个子域下获取 Cookie。例如，domain 为 A.juejin.com,那么只有A.juejin.com能获取到这个 Cookie；domain 为 .study.com,那么等同于 *.study.com 都可以。
Path

路径。默认为/，你也可以设置为/post，那么/post可以获取到/post以及/下的 Cookie，而/只能获取到/下的 Cookie。可对照图中数据

/post 路径下可以读取到，但是主页却不可以

Expires

Cookie的过期时间，可以在控制台输入 document.cookie = 'my_data=123; expires=' + new Date(2021,0,1).toGMTString();'对照图中可以看出，cookie中已经有my_data属性，说明设置成功
Size

Cookie大小
Secure

JS脚本是否可以获取（默认可以，为false），如设置为true，JS脚本将无法获取Cookie，能有效防止XXS攻击
priority：优先级

优先级，chrome的提案，定义了三种优先级，Low/Medium/High，当cookie数量超出时，低优先级的cookie会被优先清除
SameSite:限制第三方cookie
- Strict: 仅允许发送同站点请求的的cookie；
- Lax: 仅get请求跨站(chrome 80+之后的默认值)。
- None: 任意发送cookie，但是chrome 80+之后，设置为None，需要同时设置Secure，意味着网站必须采用https

保存在服务器端
当服务器收到创建session的请求时时，首先会检查客户端请求中是否包含sessionid（一般存在于cookie中）。如果有sessionid，服务器就会根据这个id返回对应session对象。如果没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。在交互中浏览器按照规则将sessionid发送给服务器。当浏览器不支持Cookie（或者用户禁用cookie）的时候，将会重写URL将SessionID拼接到访问地址后。
session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session中可含有多个对象)
session大小没有限制，但是数据量越大，会占用服务器，在线人数较多时，容易导致服务器宕机
安全性更高，要破解session需要先破解cookie，并且sessionid是需要登录的或者启动session_start，相对需要更进一步的操作。sessionID是加密的，并且启动第二次session_start时，第一次就会失效，sessionID就会sessionID
常用于商城购物车
保存登录信息
同一用户浏览不同页面
防止非法登录

localStorage 与 sessionStorage / cookie 和 session