基本概念
Cookie
- Cookie顾名思义，小甜饼，小饼干的意思，它的小主要定义在数据大小限制为4KB左右，它的作用可谓是十分的强大了。Cookie是网站为了标识用户身份而存储在客户端的一个存储技术，同时它还能做用户的身份验证。
Session
- Session翻译过来的意思是会话，它在前后端中的意思可以理解为数据的存储形式，它能够配合cookie实现用户身份的验证，而在本篇文章的后面提及到的sessionStroage，是一个前端概念，它可以将一部分数据在当前的会话窗口中保存下来，刷新页面数据依旧存在。但当页面关闭后，sessionStorage中的数据会被清空的，可以理解为当前会话窗口已关闭。
聊一聊cookie和session的区别
Cookie
cookie通常用于前后端进行身份验证的时候，标记用户的身份与众不同。说到cookie的作用，为什么要使用cookie，那就可能会说到http了，因为http是一种无状态的协议，无状态(大家可以理解为我上一秒登陆完网站，下一秒服务器再次收到访问网站请求的时候，它不认识你了，需要再次登陆，也可以说是不知道哪个客户端向服务器发送了请求)这就会导致一种情况出现：某个同学刚登陆完淘宝，跳转到购物车界面，加入完购物车的时候，需要再次登陆，想想这种用户体验真的是太差了~所以Cookie诞生了。
Cookie的缺点
但是cookie不是很安全，因为别人可以分析存放在本地的cookie并进行恶意使用，自然而然我们想到了网站漏洞XSS攻击(跨站脚本攻击)，它的原理：攻击者往web页面里插入恶意的脚本代码(css,js)当用户浏览该页面时，嵌入其中的脚本代码会执行，从而达到恶意攻击用户的目的，从而盗取cookie，破坏页面结构,这就需要我们在cookie字段中加入HttpOnly属性，保护好cookie，或者我们可以利用session，在服务器端用session去管理cookie
session是什么哇
session是由cookie进行标记的，将cookie里的数据保存在服务器端,当需要记住用户时，比如前面说的登陆，在服务器端会设置一个响应头Set-Cookie，返回给客户端，例如：Set-Cooki:SESSIONID=654321；客户端接收到这个响应后，此后每次发送一个请求，浏览器都会自动带上Cookie请求头这个小饼干，小印记，对应内容则是Cookie:ESSIONID=654321,在服务器端存有session，以后每次客户端发送请求的时候都会与服务器端的session进行对比，如果对上了，就可以识别是哪个客户端发来的请求了。
session的缺点
因为session在服务器端存储，会出现什么的情况呢？当一年一度的淘宝双11来临时，淘宝官网无疑会被大量访问，当同一个域名被大量访问时，一个域名下的众多服务器保存着同样的session，这样session所占的内存难以想象，这样会降低服务器的性能，考虑到服务器的性能优化
解决办法：
(1)共享session
将session提取出来，集中存放管理
(2)token令牌验证
客户端与服务器端的通信服务不需要存储，当进行通信交互时，可以通过解析token里面的信息来判断是否登陆。token里面可以携带cookie解析出来的信息，这样每次请求时添加一个token验证，就可以达到优化服务器性能的效果了。
安全性的考虑
需要注意的是，不是什么数据都适合放在 Cookie、localStorage 和 sessionStorage 中的。使用它们的时候，需要时刻注意是否有代码存在 XSS 注入的风险。
个人建议：
- 像登陆注册这样的重要、敏感信息应当保存在session中
- 其次临时需要信息可以存储在cookie中
localStorage、sessionStorage的异同
| 特性 | Cookie | LocalStorage | sessionStorage |
|---|---|---|---|
| 数据的生命周期 | 一般由服务器端生成 |
一旦存入， |
仅在当前会话有效， |
| 存放数据大小 | 4KB |
一般为5MB |
一般为5MB |
| 与服务器端通信 | 每次都会携带在同源 |
仅在客户端中保存 |
仅在客户端中保存 |
| 用途 | 服务器端生成， |
用于浏览器缓存数据 |
用于浏览器缓存数据 |
localStorage、sessionStorage的操作方法
setItem存储value
用途：将value存储到key字段
{ sessionStorage.setItem("key", "value"); localStorage.setItem("site", "lsh"); }
getItem获取value
用途：获取指定key本地存储的值
{ var value = sessionStorage.getItem("key"); var site = localStorage.getItem("site"); }
removeItem删除key
用途：删除指定key本地存储的值
{ sessionStorage.removeItem("key"); localStorage.removeItem("site"); }
clear清除所有的key/value
用途：清除所有的key/value
{ sessionStorage.clear(); localStorage.clear(); }
