关闭浏览器页面候清除token_Cookie, Session, Token，WebStorage你懂多少?

iTesting，爱测试，爱分享

最近遇见一个好玩的bug, 现象是页面刷新白屏,RootCause是Header里放的cookie太多了, 大小超出了4kb的限制． 解决方法很简单，拆出一部分放到LocalStorage．问题解决了，但是个人觉得很有意思，平常司空见惯的，觉得＂假大空不接地气＂的概念，其实都真真切切的在项目中体现了，只不过我们熟生轻视，看不见而已．遂记录本文． 面试的时候经常喜欢问一个问题，HTTP协议是有状态的还是无状态的？ 很多同学都不知道，或者简单背一个答案，曰无状态．再问，那么HTTP协议如何保持状态？只有一小部分同学能答出来要用cookie和session.再问,有了cookie为什么还要session？ 更少一部分人能答出来安全。 再问，不要cookie行不行？ 能答出URL重写的已经不错了。 对于高级的测试，再继续深入，session保存在服务器内存中，随着用户的增多，服务器撑不住了怎么办？ 假设我使用了集群服务怎么办？ 这个时候聪明点的就会答sesion sticky， 或者使用Memcached集中所有session id了。 但这也带来另外一个问题，session 服务器挂了怎么办？ 再弄个集群，有点傻吧，自然的，Token就被带出来了。 然后再问Token一般怎么生成的啊？ 服务器生成，把user id+时间+私密签名用Base64加密生成，自己保存一份(不放内存放DB， 也可以不保存，那么收到客户端id就用加密算法再算一次生成token来对比)， 发给客户端一份。 能回答到这里的已经可以了。 接着再顺便问一句，token里能不能保存敏感信息啊？ 为什么？ (Base64是加密吗？ )，什么是JWTtoken啊？ token组成里的私密签名，是用什么加密的啊，顺便就把公钥私钥给理清楚了。对称算法，非对称算法也给考察了。如果有人答到这里，你还对他不放心的话，再问一句你听过iTesting吗？回答听过的你就收了吧，看我公号的人技术都不会太差：)。HTTP和HTTPS的核心区别是什么？能答出TCP请求并说出区别是SSL协议的你就收了吧。像什么get和post的区别，生成一个TCP请求包还是2个就不必要再纠结了， 能研究到这里的，测试肯定也能干好。 上面说了一堆，看出来了吗？ 一个问题考察多个层面并且都有联系，平常没点积累是不行的，我的文章要常常看啊 。 下面是一些总结：

cookie 和session的区别

• 1. cookie放在客户端的浏览器上，session放服务器上。

• 2. Session生成的Session id是在cookie里保存的，cookie被禁止后可以通过URL重写来继续使用session

• 3. cookie不是安全，存放在本地的COOKIE可能被获取并进行COOKIE欺骗。

• 4. session会给服务器带来压力，考虑到服务器性能，应当使用COOKIE。

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

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

Token 和Session区别

• 1. Token放客户端， Session在服务端。

• 2. Session是空间换时间， Token是时间换空间。

• 3. Token解决了集群时候跨节点访问问题。

Cookie有限制，每次请求服务端必须带上，还有大小不能超过4kb，如果想突破这个限制怎么办？

WebStorage

为克服由cookie所带来的一些限制，当数据无需发回服务器时使用。

WebStorage两个主要目标：

• 1. 提供一种在cookie之外存储会话数据的路径。

• 2. 提供一种存储大量可以跨会话存在的数据的机制。

HTML5的WebStorage提供了两种API：

• localStorage(本地存储)

• sessionStorage(会话存储)

这两种区别在哪里？

• 1、生命周期：

localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。 localStorage除非主动删除数据，否则数据永远不会消失。 sessionStorage的生命周期是在仅在当前会话下有效。 sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。 只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。 但是sessionStorage在关闭了浏览器窗口后就会被销毁。 同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。

• 2、存储大小：

localStorage和sessionStorage的存储数据大小一般都是： 5MB

• 3、存储位置：

localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。

• 4、存储内容类型：

localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理。

• 5、应用场景：

localStoragese： 常用于长期登录(+判断用户是否已登录)，适合长期保存在本地的数据。 sessionStorage： 敏感账号一次性登录；

Web Storage带来的好处： 

• 1、减少网络流量：

一旦数据保存在本地之后，就可以避免再向服务器请求数据，因此减少不必要的数据请求，减少数据在浏览器和服务器间不必要的来回传递 。

• 2、快速显示数据：

性能好，从本地读数据比通过网络从服务器上获得数据快得多，本地数据可以及时获得，再加上网页本身也可以有缓存，因此整个页面和数据都在本地的话，可以立即显示 。

• 3、临时存储：

很多时候数据只需要在用户浏览一组页面期间使用，关闭窗口后数据就可以丢弃了，这种情况使用sessionStorage非常方便。 注意： WebStorage这部分内容copy自网络，原创不可考。

---

 -   -  时人莫小池中水, 浅处不妨有卧龙  -  -

作者：

Kevin Cai, 江湖人称蔡老师。

两性情感专家，非著名测试开发。

技术路线的坚定支持者，始终相信Nobody can be somebody。      

· 猜你喜欢的文章 ·

分库分表小结－论ＱＡ的自我修养

前端测试框架Cypress从入门到精通(预告)

如何利用cookie实现无UI登录

HTTP协议总结