测试角度分析cookie、localstorage和sessionstorage

  作为前端测试对于前端的一些基本的知识需要有一定的积累，不然测试的时候总是一头雾水。下面来总结一下cookie、localstorage和sessionstorage的概念、区别、应用场景。

基本概念

Cookie

      cookie主要是用来保存用户的登录信息的，这些信息通常是经过加密的。cookie一般是由服务器端生成然后存在浏览器中的。因为HTTP协议是无状态的，所以服务器不知道用户上一次做了什么，有了cookie，服务器可以设置和读取cookie中的信息来维护用户跟服务器会话中的状态。

      cookie的翻译是小甜饼，确实，cookie是比较小的，它的大小限制在4KB左右。因为cookie数据会一直在同源的http请求中携带，就算这些信息是没有用的也会在请求中。所以cookie是要在浏览器和服务器之前来回传递的，所以它肯定不能太大。

      浏览器端生成的cookie有一定长度的有效期，在有效期时间内它是一直存在浏览器中的，即使关闭浏览器，它仍然存在。

Localstorage

     localstorage和sessionstorage都是在HTML 5之后提供的新的客户端存储数据的方法。

     localstorage是没有时间限制的数据存储，就是说，如果数据存在localstorage中只要不清除浏览器存储的数据，它将一直存在于浏览器中。

     localstorage是专门用于客户端存储数据的，所以它不会强制携带在客户端的请求中。因此它的数据大小限制也没有cookie那么严格，localstorage的大小限制为5M左右。

Sessionstorage

    sessionstorage和localstorage有点相似，但是它和localstorage的生命周期不一样，它只在当前会话保存在浏览器中，当会话结束它就被清除了。这样说可能比较抽象，简单说就是关闭浏览器之后，存储在sessionstorage中的数据都将被清除。

    sessionstorage也主要用于客户端存储数据，它不会被强制携带在客户端的请求中。它的大小也被限制在5M左右。

下面用一个表格来梳理一下：

特性

Cookie

localStorage

sessionStorage

数据的生命期

一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效

除非被清除，否则永久保存

仅在当前会话下有效，关闭页面或浏览器后被清除

存放数据大小

4K左右

一般为5MB

与服务器端通信

每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

仅在客户端（即浏览器）中保存，不参与和服务器的通信

 

应用场景

Cookie

  cookie大家应该相对熟悉一些，主要是用来存储中用户的信息的。主要验证的点可能是对应cookie值的有效期是否正确。下图中是cookie的有效期限，可以通过这个来验证。

上图中Expires/Max-Age字段就是用来记录cookie的有效时间的。上图中圈出的就是用户密码保存的时间10天。

Localstorage

  localstorage主要用来存储和当前设备有关的一些数据，比如：首次进入的引导提示、用户在未登陆状态读过的书等

如上图，guide_showed=1是用来记录首次进入阅读器首页的引导浮层已经出现过了，以后都不会再出现。YUEDU163_READLOG是用来记录在当前设备当前浏览器中用户阅读过的书籍。

Sessionstorage

  sessionstorage主要用来存储每次会话都会展示的东西，比如：广告，本次我把广告推广关闭了，然后关闭浏览器，下次再进来这条广告还会再出现。