一、页面白屏

问题：页面刷新白屏

原因及解决方法：单个cookie保存数据的大小超出4KB限制，拆出部分放到LocalStorage。

二、Cookies、Session、Token、WebStorage

1、Cookie

大多数的应用都是用Cookie来实现Session跟踪【辨别用户身份进行Session跟踪】。

在客户端第一次访问，服务器在http响应中添加Set-Cookie信息，浏览器收到响应后会在Cookie中记录一个Session ID（唯一标识session），在每一次请求时把这个附带Session ID的Cookie发送到服务器。

Cookie存储在用户本地终端上的数据（一般通信是加密），由用户客户端计算机暂时或永久保存。

Cookie有跨域限制，CSRF是跨站请求伪造，通常是基于cookie。

第三方Cookie：在电视论坛上有jd的广告窗口，这个广告窗口是jd.com的页面组件，他就能在jd.com这个域名下的Cookie写上你支逛过电视论坛，之后你在京东网上浏览的时候，就会读取Cookie获取到信息给你推电视广告。相对于电视论坛来说，jd就是第三cookie，如果想保护隐私，可以浏览器禁用第三方Cookie。

2、Session

Session被称为会话控制，它是用来跟踪用户的状态。

Session对象存储特定用户会话所需的属性及配置信息，可以保存在集群、数据库或文件中。

当用户在应用程序的各个页面之间跳转时，存储在Session对象中变量将不会丢失，而是在整个用户会话中一直存在下去。当用户请求来自应用程序的某一个页面时，如果该用户还没有会话，则网页服务器将自动创建一个Session对象。当会话过期或被放弃后，服务器将终止该会话。

3、Token

Token是服务端验证用户身份信息之后发送给客户端的用于标识用户身份的数据（验证会话的登录），可以是随机数，或加密后的用户名密码。

token验证服务端不需要存储用户会话所需要配置数据，它是服务端生成的一串字符串，作为客户端进行请求的标识，服务端也会存储这个token，客户端接收token后可以保存到Cookie或LocalStorage中，

当用户第一次登录后，服务器生成一个Token并将此Token返回给客户端，以后客户端带上这个Token前来请求数据即可，无须再次带上用户名和密码。

Token没有跨域限制。

4、WebStorage【跨会话存储数据】

WebStorage是HTML5提供的本地存储，是对cookie存储机制的一个改装，提供两种类型的API：LocalStorage和SessionStorage。两个API存储数据大小一般都是5MB，且只能存储字符串类型，对于复杂的对象可使用ECMAScript提供的Json对象的stringify和parse来处理。

LocalStorage：永久的、始终有效，关闭窗口或浏览器之后数据仍存在，所有同源窗口都是共享的【除主动删除数据】。

SessionStorage：仅在当前会话Session有效，当用户关闭浏览器窗口后，数据会被删除，不同浏览器同一个页面，两个SessionStorage不一样。

Cookie：只在设置的cookie过期时间（以UTC或GMT时间）之前一直有效，即使用窗口和浏览器关闭；所有同源窗口都是共享的。

【区别】：

（1）Cookie、LocalStorage和SessionStorage都保存在客户的浏览器中。

（2）Cookie是与服务器进行交互，作为http规范一部分而存在，webstorage与cookie相似，但webstorage是为了更大容量存储设计的，webstorage仅为了在本地存储数据而生。

Cookie数据始终在同源的Http请求中携带（即使用不需要），即Cookie在浏览器和服务器之间来回传递；而SessionStorage和LocalStorage不会自动把数据发送给服务器，仅在本地保存。

（3）数据有效期不同。cookie只在设置的过期之前有效，即使用关闭窗口或浏览器；sessionstorage仅在当前浏览器窗口有效，关闭窗口后失效；localstorage永久有效

（4）作用域不同，sessionstorage不在不同的浏览器窗口中共享，localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。

【应用场景】：localStorag常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据；SessionStorage一般用于敏感账号的一次性登录。

5、Signature签名和JWT

JWT由header、payload和Signature三个部分组成。Signature是对前两部分的签名，防止数据被篡改。

首先，需要指定一个密钥(secret)。这个密钥只有服务器才知道，不能泄露给用户。然后使用Header里面指定的签名算法（默认是 HMAC SHA256），按照下面的公式产生签名。

算出签名后，把 Header、Payload、Signature 三个部分拼成一个字符串，每个部分之间用"点"（.）分隔，就可以返回给用户。

第一种使用方式：客户端收到服务器返回的JWT，可以存储在Cookie，或LocalStorage中，之后客户端每一次与服务器通信时，都带JWT参数。但当JWT放入Cookie里面自动发送时，不能用于跨域，所以更好的做法是放在Http请求头的Authorization字段里面。

第二种使用方式：跨域时，JWT放在Post请求的数据体里。

6、小结

（1）cookie数据存放在客户的浏览器上，session数据放在服务器上。cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗。考虑到安全应当使用session，用户验证这种场合一般会用session。

（2）cookie只能保存字符串类型，以文本的方式。session通过类似与Hashtable的数据结构来保存，能支持任何类型的对象(session保存的是对象，它可以含有多个对象)

（3）单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。Session大小没限制。

（4）session会在一定时间内保存在服务器上，客户端不知道其中信息，但cookie保存在客户端，服务器能够知道其中信息。当访问增多，会比较占用你服务器的性能。考虑到减轻服务器性能方面，应当使用COOKIE。

（5）Session生成的Session id是在cookie里保存的，cookie被禁止后可以通过URL重写来继续使用session。session会给服务器带来压力，考虑到服务器性能，应当使用COOKIE。所以建议：将登陆信息等重要信息存放为SESSION。其他信息如果需要保留，可以放在COOKIE中。

（6）Session不能区分路径，同一个用户在访问一个网站期间，所有的Session在任何一个地方都可以访问到，而Cookie中如果设置了路径参数，那么同一个网站中不同路径下cookie互相是访问不到的。

（7）session可快速禁用某个用户，但占用内存成本高，存在跨域限制；JWT是前端发起请求接口，后端验证后返回一个加密用户信息的token，前端获取到存储起来，之后每次请求时带上。JWT不用内存，但无法快速禁用某个用户，体积数量大于Cookie，密钥泄露就能获取到信息。

三、http协议

由于http协议是无状态，客户端每个请求的连接持续时间也是有限的，当多个http请求时，http协议使用Cookie和Session保存状态信息。为什么使用了Cookies之后还需要Session呢？

1、是不是可以没有Cookie？

解决方法：可以没有Cookie，可以使用URL重写。

2、由于Session保存在服务器内存中，随着用户的增多，服务器压力过大该怎么办，或者滥用Session怎么办？解决方法：

（1）把session存储到memcache中，或者redis中。

（2）分布式session存储。

（3）把session文件拆分到多个目录下，避免单个大目录导致的文件系统I/O问题。

（4）设置定时清单任务，超过1天的session文件。

（5）不使用Session，改为Cookie+Cache。

（6）服务器集群实现session共享。原文链接​​https://blog.csdn.net/Drownedinthesea/article/details/125210638​​

四、引用文章或链接

【引文章：iTesting 公众号】

【引用链接】：

​​https://blog.csdn.net/kongsuhongbaby/article/details/106757716​​

​​https://blog.csdn.net/weixin_34551660/article/details/116757996​​

​​https://blog.csdn.net/weixin_43973415/article/details/113416869​​

​​https://www.cnblogs.com/c-jw/p/14072390.html​​

​​https://blog.csdn.net/pagnzong/article/details/114881572​​