详解cookie、session和webstorage

一、cookie和session

1. http

http：超文本传输协议，是一种用于分布式、协作式和超媒体信息系统的应用层协议（HTTP是万维网数据通信的基础）
http的目的：提供一种发布和接收HTML页面的方法，通过HTTP和HTTPS协议请求的资源由URL来标识
HTTP是无状态协议，无法从网络链接上知道客户端身份，不能以状态来区分和管理请求和响应
为了保持http链接状态的技术：

1. cookie
2. session

2. cookie（客户端）

cookie是客户端用来保存用户信息的一种机制，来记录用户的一些信息（实际上也是服务器在客户端存储的一小段文本），随着每次请求发送到服务器（存放在HTTP响应头中：请记住我功能）

cookie技术通过在请求和响应报文中写入cookie信息来控制客户端的状态

• cookie会通过响应报文中的set-cookie首部字段，通知客户端保存cookie
• 下次客户端再次向服务器发送请求时，客户端会自动在请求报文中加入cookie值
• 服务器会根据客户端发送过来的cookie，来检测是哪个客户端发送过来的请求，对应服务器上的记录，找到之前的状态信息

客户端没有cookie时发送的请求：

1. 客户端发送请求后，服务端接收到并保存cookie
2. 返回响应时，使用set-cookie通知客户端保存cookie

客户端保存了cookie时发送的请求：

3. 客户端在请求中添加cookie发送
4. 服务器发现cookie后对比服务器，检查是从哪个客户端发送的请求，获取之前的状态信息

2.1 set-cookie的字段信息

Set-Cookie: logcookie=3qjj; expires=Wed, 13-Mar-2019 12:08:53 GMT; Max-Age=31536000; path=/;
 domain=fafa.com;secure; HttpOnly;

1. logcookie=3qjj;是cookie的名字和值，logcookie是名字，3qjj是值
2. expires=Wed, 13-Mar-2019 12:08:53 GMT;表示cookie的有效期
   当没有设置这个属性时，cookie在关闭浏览器之前有效
3. path 是限制指定cookie发送的范围和文件目录。
4. domain：域名；
5. source：只能在https 的请求中携带和发送cookie
6. http-only：不能通过js访问cookie，减少XSS攻击
7. same-site：规定浏览器不能在跨域请求中携带cookie，减少CSRF攻击

3. session（服务端）

1. 通过服务器保持状态，session，翻译为会话；表示：
   客户端和服务器之间的一系列交互动作===session
2. session指的是服务器为客户端所开辟的存储空间，在其中保存的信息就是用于保持状态

• 服务器在程序运行过程中创建session，创建session的同时，服务器还会为session生成唯一的session_id，这个session_id在之后的请求中会被用来重新获得已创建的session；

• session在被创建之后，就可以调用session相关的方法，往session中增加内容。但是这些内容只会保存在服务器中，发到客户端的只用session_id;

• 当客户端再次发送请求的时候，会将这个session id 带上，服务器接收到请求后会根据这个session id找到对应的session，就是这样保持用户的状态

session是解决HTTP协议无状态的一个方案，能让客户端和服务器的一系列交互动作变成一个完整的事务，使网站变成一个真正意义上的软件

1. 客户端发送请求给服务器
2. 服务器发放用以识别用户的session id，把从客户端发送过来的信息进行处理：把用户认证认证状态与session id 绑定后记录在服务器端
   向客户端返回响应时，会在首部字段set-cookie内写入session id（用于区分不同用户的唯一id）
3. 客户端接收到服务端发送来的session id后，会将其作为cookie保存在本地，下次向服务器发送请求时，浏览器会自动发送带有session ID的cookie，服务器就可以通过接收到的session id验证登录状态

4. session和cookie的关系

关系：

• 服务端的session对客户端cookie是有依赖的：服务端执行session机制时候会生成session的id值，这个id值会发送给客户端，客户端每次请求都会把这个id值放到http请求的头部发送给服务端，而这个id值在客户端会保存下来，保存的容器就是cookie，
• 当我们禁止cookie的时候，session也不能正常使用

区别：

1. cookie在客户端上，session在服务器上，服务端的session实现对客户端的cookie是有依赖关系的
2. cookie 不安全，可以将存放在本地的cookie进行修改
3. session会在一定的时间内保存在服务器上，访问量增多的时候，会占有服务器的性能
4. 单个cookie在客户端的限制是4k（一个站点在客户端存放的cookie不能超过4k）

二、webStorage

websotrage是H5提供的在客户端存储数据的方法，为了客服cookie的一些限制：

• 提供在cookie之外的存储会话数据的途径
• 提供一种大量可以跨会话存在的数据机制

webstorage 更加的安全和快速，，只用于用户请求网站数据，可以存储大量的数据，而不影响网站的性能，数据以键值对存在，web网页的数据只允许该网页访问使用。

2.1 方法：

- setItem (key, value) ——  保存数据，以键值对的方式储存信息。

 - getItem (key) ——  获取数据，将键值传入，即可获取到对应的value值。

 - removeItem (key) ——  删除单个数据，根据键值移除对应的信息。

 - clear () ——  删除所有的数据

 - key (index) —— 获取某个索引的key

localstorage

关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。使用方法如下：

   var storage = null;
   if(window.localStorage){              //判断浏览器是否支持localStorage
       storage = window.localStorage;     
       storage.setItem("name", "Rick");    //调用setItem方法，存储数据
       alert(storage.getItem("name"));     //调用getItem方法，弹框显示 name 为 Rick
       storage.removeItem("name");     //调用removeItem方法，移除数据
       alert(storage.getItem("name"));   //调用getItem方法，弹框显示 name 为 null

  }

sessionStorage

sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点：

1. 页面刷新不会消除数据;
2. 只有在当前页面打开的链接，才可以访sessionStorage的数据；
3. 使用window.open打开页面和改变localtion.href方式都可以获取到sessionStorage内部的数据;

参考文章：https://www.cnblogs.com/sharpxiajun/p/3395607.html