登录状态控制：cookies对比sessionStorage保持信息的分析

cookie和session都是用来跟踪浏览器用户身份的会话方式。

传统上，我们一般用cookie来存储用户信息

cookies存储信息

之前在《cookie跨域传输cookie问题：nginx跨域代理之proxy_cookie_domain 》，再次摘要

前端跨域传输cookie到服务端，需要三个条件：

1. Access-Control-Allow-Origin不能为*，应为具体域名
2. 服务端Access-Control-Allow-Credentials应为true
3. 客户端XMLHttpRequest 的 withCredentials=true

在chrome80版本后，需要设置 same-site属性

• Strict最为严格，完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。换言之，只有当前网页的 URL 与请求目标一致，才会带上 Cookie。 这个规则过于严格，可能造成非常不好的用户体验。比如，当前网页有一个 GitHub 链接，用户点击跳转就不会带有 GitHub 的 Cookie，跳转过去总是未登陆状态。
• None，Cookie 只能通过 HTTPS 协议发送。必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。 Set-Cookie: widget_session=abc123; SameSite=None; Secure
• Lax规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。 导航到目标网址的 GET 请求，只包括三种情况：链接，预加载请求，GET 表单。

个人还是比较习惯用cookie，传统，而迷信之安全。当然session 用法更简单

cookies生存期期限

• 不设置Cookies的过期时间则默认为关闭浏览器Cookies生命周期到期（默认-Expires缺省时）。
•  设置生命周期（Expires）。每个Cookie都有自己的过期时间，超过了过期时间后失效。

cookie存在的问题

• 大小：cookie的大小被限制在4KB。不同浏览器限制不一样，具体见下表 IE6.0IE7.0/8.0OperaFFSafariChromecookie个数：每个域为20个每个域为50个每个域为30个每个域为50个没有个数限制每个域为53个cookie总大小：4095个字节4095个字节4096个字节4097个字节4097个字节4097个字节
• 带宽：cookie是随HTTP事务一起被发送的，因此会浪费一部分发送cookie时使用的带宽。
• 复杂性：要正确的操纵cookie是很困难的。

Web Storage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的Web Storage存储机制。 本地数据库是HTML5中新增的一个功能，使用它可以在客户端本地建立一个数据库，原本必须保存在服务器端数据库中的内容现在可以直接保存在客户端本地了，这大大减轻了服务器端的负担，同时也加快了访问数据的速度。

所以，还是sessionStorage 存储token比较好

sessionStorage存储信息

sessionStorage：将数据保存在session对象中。

所谓session，是指用户在浏览某个网站时，从进入网站到浏览器关闭所经过的这段时间，也就是用户浏览这个网站所花费的时间。session对象可以用来保存在这段时间内所要求保存的任何数据。 后台的session 比如Java的session，它是基于往cookie写入一个JSESSIONID来实现的，所以，只要你不是打开一个隐身窗口，无论你开多少个标签页，不同标签页之间都会被认为是一个session，你在这个标签页登录了，新开一个标签输入地址，仍然是登录状态。 浏览器session sessionStorage的session仅限当前标签页或者当前标签页打开的新标签页，通过其它方式新开的窗口或标签不认为是同一个session。

sessionStorage 的有效期是页面会话持续，页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话，如果页面会话（session）结束（关闭窗口或标签页），sessionStorage 就会被清除。

需要注意的是，sessionStorage之存储字符串

sessionStorage.setItem("isAndy" false)  

取出的是字符串‘false’

localStorage和sessionStorage的最大区别是生命周期，一个永久，一个仅针对一个会话期间有效。

参考文章：

• 做前端这么多年，今天才发现关于sessionStorage的一个误区 blog.haoji.me/aboute-session-storage.html?tdsourcetag=s_pctim_aiomsg
• cookie跨域传输cookie问题：nginx跨域代理之proxy_cookie_domain  https://www.zhoulujun.cn/html/tools/webServer/nginx/2020_0526_8439.html

转载本站文章《登录状态控制：cookies对比sessionStorage保持信息的分析》, 请注明出处：https://www.zhoulujun.cn/html/webfront/SGML/web/2020_0608_8452.html