Cookie

机制 <响应头加上Set-Cookie: key= value>

如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。

Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它

  1. Set-Cookie: token=d19fb4cac474fe008c16575878215558; Domain=webfem.com; Path=/; Expires=Mon, 17 Jun 2019 13:12:36 GMT; HttpOnly

基本设置

1.domain

domain 规定这个cookie在哪些域名下有效，默认取当前host作为domain

2.path

path 规定cookie在此domain下的特殊路由下生效，算是一个细分的属性，一般用不到，默认/，表示全路由生效

3.epires

cookie 的过期时间

  • 是一个绝对时间，时间要转成GMT形式，如果计算机时间大于这个值，浏览器就将此cookie删除。toGMTString()；
  • 默认情况下cookie是暂时存在的，他们存储的值只在浏览器会话期间存在，当用户退出浏览器后这些值也会丢失。
  • 现在已经被max-age属性所取代，max-age用秒来设置cookie的生存期

    4.HttpOnly

    js不能拿到这个cookie值，默认为false

    5.secure

    它是一个布尔值，指定在网络上如何传输cookie，默认是不安全的，通过一个普通的http连接传输

Cookie & Session - 图1

6.通过js设置cookie

js操作cookie，只能通过document.cookie属性获取，它是一个可读可写的属性。但是设置了http-only 属性的cookie，这个属性就取不到了。具体操作如下:

  1. // get cookie。document.cookie 会返回所有cookie组成的字符串
  2. document.cookie;
  4. // set cookie。 给 document.cookie 赋值，逐一修改原有cookie，而不会全部覆盖
  5. document.cookie = 'sessionid=12323;name=space';
  7. // 删除cookie, 原理：cookie 值设为空，过期时间设一个比现在早的时间
  8. document.cookie = `sessionid=;expires=${new Date('1970-01-01'). toUTCString()}`

js 能拿到cookie，这为前端开发带来的方便，但是，也出现了一些安全隐患，比如通过<script>标签加载的第三方js，就有可能恶意修改本地cookie，所以设置httpOnly是个很好的习惯。

Session

机制

当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。

储存

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

存储的大小：cookie：单个cookie保存的数据不能超过4kb；session大小没有限制。

安全性：cookie：针对cookie所存在的攻击：Cookie欺骗，Cookie截获；session的安全性大于cookie。

原因如下：
（1）sessionID存储在cookie中，若要攻破session首先要攻破cookie；
（2）sessionID是要有人登录，或者启动session_start才会有，所以攻破cookie也不一定能得到sessionID；
（3）第二次启动session_start后，前一次的sessionID就是失效了，session过期后，sessionID也随之失效。
（4）sessionID是加密的
（5）综上所述，攻击者必须在短时间内攻破加密的sessionID，并非易事。

应用场景

cookie：
（1）判断用户是否登陆过网站Token，以便下次登录时能够实现自动登录（或者记住密码）。如果我们删除cookie，则每次登录必须从新填写登录的相关信息。
（2）保存上次登录的时间等信息。
（3）保存上次查看的页面
（4）浏览计数

session：
Session用于保存每个用户的专用信息，变量的值保存在服务器端，通过SessionID来区分不同的客户。
（1）网上商城中的购物车
（2）保存用户登录信息
（3）将某些数据放入session中，供同一用户的不同页面使用
（4）防止用户非法登录

缺点

cookie：
（1）大小受限
（2）用户可以操作（禁用）cookie，使功能受限 //
（3）安全性较低
（4）有些状态不可能保存在客户端。
（5）每次访问都要传送cookie给服务器，浪费带宽。
（6）cookie数据有路径（path）的概念，可以限制cookie只属于某个路径下。

session：
（1）Session保存的东西越多，就越占用服务器内存，对于用户在线人数较多的网站，服务器的内存压力会比较大。
（2）依赖于cookie（sessionID保存在cookie），如果禁用cookie，则要使用URL重写，不安全
（3）创建Session变量有很大的随意性，可随时调用，不需要开发者做精确地处理，所以，过度使用session变量将会导致代码不可读而且不好维护。

WebStorage

（1）提供一种在cookie之外存储会话数据的路径。（2）提供一种存储大量可以跨会话存在的数据的机制

HTML5的WebStorage提供了两种API：localStorage（本地存储）和 sessionStorage（会话存储）。

生命周期

localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。

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

一般应用于可能同时打开多个页面的那种应用；他们在浏览器中需要共同获取某一个信息；多个页面共用

储存

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

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

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

获取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

应用场景

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

优点

（1）存储空间更大：cookie为4KB，而WebStorage是5MB；
（2）节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样每次请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；
（3）对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；
（4）快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；
（5）安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；
（6）WebStorage提供了一些方法，数据操作比cookie方便；
setItem (key, value) —— 保存数据，以键值对的方式储存信息。