标签：cookie 浏览器 sessionStorage session Cookie 服务器 localStorage 客户端
一、Cookie
1.1 为什么有cookie和seesion？（http请求是无状态的）
客户端 请求 服务器, 属于HTTP请求。http请求是无状态的,即每次服务端接收到客户端的请求时，都是一个全新的请求，服务器并不知道客户端的历史请求记录；所以当用户从客户端请求一次登录后，登录成功，再次进行请求时，因为服务器不能识别这两次会话都是来自同一个浏览器，即服务端不知道客户端的历史请求记录；就会再次弹出登录对话框。
为了解决客户端与服务端会话同步问题。这便引出了：cookie、session，用来跟踪浏览器用户身份的会话方式
cookie分为会话cookie 和 持久cookie：
会话cookie： 浏览器关闭，销毁
持久cookie：设定了它的生命周期expires，直到时间到期，信息销毁（即便你关闭了浏览器，再次开启浏览器，依然存在）。
session：
1.2 cookie的工作原理？
Cookie实际上是一小段的文本信息。
（1）浏览器端第一次发送请求到服务器端；
（2）如果服务器需要记录该用户状态，服务器端就创建Cookie，该Cookie中包含用户的信息，然后将该Cookie发送到浏览器端；
（3）浏览器端再次访问服务器端时，会携带服务器端创建的Cookie；
（4）服务器端通过Cookie中携带的数据，区分不同的用户（服务器还可以根据需要修改Cookie的内容）；
实际就是颁发一个通行证，每人一个，无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。
1.3 cookie的属性：domain
设置可以访问该Cookie的域名。如果设置为“.google.com”，则所有以“google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”。
总结：
- domain表示的是cookie所在的域，默认为请求的地址，如网址为www.study.com/study，那么domain默认为www.study.com。
- 而跨域访问，如域A为t1.study.com，域B为t2.study.com，那么在域A生产一个令域A和域B都能访问的cookie就要将该cookie的domain设置为.study.com；如果要在域A生产一个令域A不能访问而域B能访问的cookie就要将该cookie的domain设置为t2.study.com。注意：一般在域名前是需要加一个"."的，如"domain=.study.com"。
1.4 cookie面临的问题
- Cookie只能保存少量的数据。每个domain（特点的域名下）最多只能有20条cookie，每个cookie长度不能超过4kb，否则会被截掉;
- 安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也于事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。
- 有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么他起不到任何作用。
- 每次客户端的访问都必须传回这些Cookie，如果 Cookie 很多，这无形地增加了客户端与服务端的数据传输量(通过session解决）
二、Session
2.1 什么是session？
而 Session 的出现正是为了解决cookie中的安全性问题、数据传输量大的问题。
同一个客户端每次和服务端交互时，不需要每次都传回所有的 Cookie 值，而是只要传回一个 ID，这个 ID 是客户端第一次访问服务器的时候生成的， 而且每个客户端是唯一的。这样每个客户端就有了一个唯一的 ID，客户端只要传回这个 ID 就行了，这个 ID 通常是 NANE 为JSESIONID 的一个 Cookie（例：响应头Set-Cookie：“JSESSIONID=服务端生成的ID”）。
2.2 session的工作原理？
（1）服务器第一次接收到请求时，开辟了一块Session空间（创建了Session对象，将用户信息储存到服务器的Session中），同时生成一个Session id；
（2）通过响应头的Set-Cookie：“JSESSIONID=Session id”命令，通过响应头将该Cookie发送至客户端；
（3）客户端收到响应后，在本机客户端设置了一个JSESSIONID=Session id的cookie信息；
（4）接下来客户端每次向同一个网站发送请求时，请求头都会带上该cookie信息（包含Session id）；
（5）然后，服务器通过读取请求头中的Cookie信息，获取名称为JSESSIONID的值，得到此次请求的Session id，从而找到对应的用户信息；
注意：服务器只会在客户端第一次请求响应的时候，在响应头上添加Set-Cookie：“JSESSIONID=XXXXXXX”信息，接下来在同一个会话的第二第三次响应头里，是不会添加Set- Cookie：“JSESSIONID=XXXXXXX”信息的； 而客户端是会在每次请求头的cookie中带上JSESSIONID信息；
2.3 session的缺点？
- 一般是寄生在Cookie下的，当Cookie被禁止，Session也被禁止。
- 当用户访问量很大时，对服务器压力大。session是将用户信息储存在服务器上面,如果访问服务器的用户越来越多,那么服务器上面的session也越来越多, session会对服务器造成压力
三、Cookie与Session的区别
- cookie数据存放在客户的浏览器上，session数据放在服务器上
- cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗,如果主要考虑到安全应当使用session
- session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能，如果主要考虑到减轻服务器性能方面，应当使用COOKIE
- 单个cookie在客户端的限制是3K，就是说一个站点在客户端存放的COOKIE不能3K。
- 所以：将登陆信息等重要信息存放为SESSION;其他信息如果需要保留，可以放在COOKIE中
四、WebStorage（包括localStorage和sessionStorage）
webstorage是本地存储，存储在客户端，包括永久性的本地存储localStorage和会话级别的本地存储sessionStorage。
这两本质上的区别就是,当你关闭窗口后,sessionStorage里面的存储的数据将全部清空
4.1 localStorage
- 为永久保存，将数据保存在客户端本地的硬件设备(通常指硬盘，也可以是其他硬件设备)中，即使浏览器被关闭了，该数据仍然存在，除非removeItem；
- 存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与 和服务器的通信；
- 取代了globalStorage(globalStorage必须指定域名)；
- Storage类型的一个对象；
4.2 sessionStorage
- 为临时保存，仅在当前会话下有效，关闭页面或浏览器后被清除；
- 存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与 和服务器的通信；
- Storage类型的一个对象；
4.3 localStorage和sessionStorage的特点
1）存储大小：
localStorage和sessionStorage的存储数据大小一般都是：5MB
2）存储位置：
localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信
3）应用场景：
localStoragese：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据，而sessionStorage：敏感账号一次性登录
4）获取方式：
localStorage：window.localStorage;；sessionStorage：window.sessionStorage;
sessionStorage只要同源的同窗口中，刷新页面或进入同源的不同页面，数据始终存在，也就是说只要浏览器不关闭，数据仍然存在
4.4 sessionStorage、localStorage和cookie的区别
- 相同点是都是保存在浏览器端、且同源的；
- cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存；
- cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下；
- 存储大小限制也不同，cookie数据不能超过4K，由于每次http请求都会携带cookie，cookie只适合保存很小的数据（如会话标识）。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大；
- 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭；
- 作用域不同，sessionStorage在不同的浏览器窗口中不共享，即使是同一个页面（同源的前提下，还要同一窗口才共享）；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
- web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
- web Storage的api接口使用更方便
4.5 WebStorage的优点
- 存储空间更大：cookie为4KB，而WebStorage是5MB
- 节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，减少了客户端和服务器端的交互，节省了网络流量
- 对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便
- 快速显示：有的数据存储在WebStorage上，获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快
- 安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题
- WebStorage提供了一些方法，数据操作比cookie方便
- setItem (key, value) —— 保存数据，以键值对的方式储存信息。
- getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
- removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
- clear () —— 删除所有的数据
- key (index) —— 获取某个索引的key
可参考cookie、sessionStorage和localStorage的区别：
五、作用域
1）localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据，即在所有同源窗口中都是共享的
2）sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
3）cookie在所有同源窗口中都是共享的
六、怎么设计登录，token呢？讲一讲 JWT？
标签：cookie,浏览器,sessionStorage,session,Cookie,服务器,localStorage,客户端 来源： https://blog.csdn.net/sunnnnh/article/details/117042643
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。