介绍cookie及其属性以及和localstorage的区别

什么是cookie?

cookie是用来保存用户信息的一小块数据块这里面可以包括你的(用户名，密码，个性设置等等)信息。当客户端请求服务端时，浏览器会先检查是否有对应的cookie，如果之前登陆过这个网站即有这个cookie时会自动添加到request 的header的cookie字段。然后携带着cookie一起发送给服务端。这样可以避免很多麻烦。比如之前登陆过京东网站，当我们再次登陆时，就会发送网络请求的同时，携带着对应的cookie发送给服务器，服务器通过cookie查看后，发现这个用户保存着用户名和密码，那么就不需要再次填写密码登陆。但是由于cookie很小只有4k左右，并且需要在客户端和服务端来回传递，所以携带的信息就是很必须的。

cookie属性

我们可以通过按F12，在application里边有一个cookie选项，在那里边可以查看相关内容。

• Domain和Path

Domain里边存放的域名，path里边存放的是路径，这两个加起来就是URL，表示的意思是当我们这个URL的时候可以携带当前cookie.

• Expire

一个cookie并不是永久有效的，他通过Expire来控制cookie的有效时间，当超过这个有效时间，那么这个cookie就会被销毁。比如我们在csdn上登陆，查看一个cookie，这个cookie携带着我们的用户名密码，有效期是明天上午12点，那么当我们过了这个时间再登陆的话，我们就需要重新输入用户名和密码了。发生跨域xhr请求时，即使请求URL的域名和路径都满足 cookie 的 Domain和Path，默认情况下cookie也不会自动被添加到请求头部中。

• Size

Cookie的大小

• Httponly (避免xss攻击)

设置cookie是否能通过 js 去访问。默认情况下，cookie不会带httpOnly选项(即为空),这样就默认我们可以通过js去修改cookie。所以当我们的浏览器在Httponly这一栏没打着对勾就意味着我们不能通过js去修改只能是服务器来修改。

• Secure

Secure选项用来设置cookie只在确保安全的请求中才会发送。当请求是HTTPS或者其他安全协议时，包含 Secure选项的 cookie 才能被发送至服务器。默认是不勾选的。但要注意一点，Secure选项只是限定了在安全情况下才可以传输给服务端，但并不代表你不能看到这个 cookie。如果想在客户端即网页中通过 js 去设置Secure类型的 cookie，必须保证网页是https协议的。在http协议的网页中是无法设置secure类型cookie的。

• SameSite（避免csrf攻击）

Cookie 的SameSite属性用来限制第三方 Cookie，从而减少安全风险。这样可以避免csrf(跨站请求伪造攻击 )

csrf攻击是怎么攻击的呢？我们使用阮一峰叔叔的例子做一下讲解。

用户登陆了银行网站your-bank.com，银行服务器发来了一个 Cookie。

Set-Cookie:id=a3fWa;

用户后来又访问了恶意网站malicious.com，上面有一个表单。

<form action="your-bank.com/transfer" method="POST">
  ...
</form>

用户一旦被诱骗发送这个表单，银行网站就会收到带有正确 Cookie 的请求。为了防止这种攻击，表单一般都带有一个随机 token，告诉服务器这是真实请求。

<form action="your-bank.com/transfer" method="POST">
  <input type="hidden" name="token" value="dad3weg34">
  ...
</form>

这种第三方网站引导发出的 Cookie，就称为第三方 Cookie。它除了用于 CSRF 攻击，还可以用于用户追踪。

Facebook 在第三方网站插入一张看不见的图片。

img src="facebook.com" style="visibility:hidden;">

浏览器加载上面代码时，就会向 Facebook 发出带有 Cookie 的请求，从而 Facebook 就会知道你是谁，访问了什么网站。

Cookie 的SameSite属性用来限制第三方 Cookie，从而减少安全风险。

SameSite有三个值，分别是 Strict，Lax，None

• Strict
  • 完全禁止第三方 Cookie，跨站点时，任何情况下都不会发送 Cookie。
• Lax
  • 规则稍稍放宽，大多数情况也是不发送第三方 Cookie，但是导航到目标网址的 Get 请求除外。
• None
  • Chrome 计划将Lax变为默认设置。这时，网站可以选择显式关闭SameSite属性，将其设为None。不过，前提是必须同时设置Secure属性（Cookie 只能通过 HTTPS 协议发送），否则无效。

cookie和session的区别

cookie是存在客户端浏览器上，session会话存在服务器上。会话对象用来存储特定用户会话所需的属性及配置信息。当用户请求来自应用程序的web页时，如果该用户还没有会话，则服务器将自动创建一个会话对象。当会话过期或被放弃后，服务器将终止该会话。cookie和会话需要配合。

浏览器本地存储（web storage分为localStorage，sessionStorage）

localStorage和sessionStorage

在较高版本的浏览器中，js提供了两种存储方式：sessionStorage和globalStorage。在H5中，用localStorage取代了globalStorage。sessionStorage用于本地存储一个会话中的数据，这些数据只有在同一个会话中的页面才能访问，并且当会话结束后，数据也随之销毁。所以sessionStorage仅仅是会话级别的存储，而不是一种持久化的本地存储。localStorage是持久化的本地存储（不随这用户发送请求同时发送给服务器，存储容量比cookie大很多，5MB），除非是通过js删除，或者清除浏览器缓存，否则数据是永远不会过期的。浏览器的支持情况：IE7及以下版本不支持web storage，其他都支持。不过在IE5、IE6、IE7中有个userData，其实也是用于本地存储。这个持久化数据放在缓存中，只有不清理缓存，就会一直存在。

有什么问题可以私聊我，希望大家可以一起进步