Cookie、Session详解

1. Cookie详解

1.1 简介

前言：因为HTTP协议是无状态的，即服务器不知道用户上一次做了什么，这严重阻碍了交互式Web应用程序的实现。

1. Cookie是以小的文本文件形式（即纯文本），由服务端生成的，发送给客户端；Cookie保存了登录的凭证，有了它，只需要在下次请求时带着Cookie发送，就不必再重新输入用户名、密码重新登录了。
2. Cookie，是指某些网站为了辨别用户身份、进行session跟踪而储存在用户本地终端上的数据。
3. 是设计用来在服务端和客户端进行信息传递。

1.2 Cookie 属性

1. Cookie 的名称（Name） 和值（Value）

   • 最重要的两个属性，创建Cookie时必须填写，其他属性可以使用默认值

   • Cookie 的名称或值如果包含非英文字母，则写入时需要使用encodeURIComponent()编码，读取时使用decodeURIComponent()解码

     document.cookie = `${encodeURIComponent('用户名')}=${encodeURIComponent('张三')}`
     

   • 一般名称使用英文字母，不要用中文，值可以用中文，但是要编码

2. 失效（到期）时间

   • 对于失效的Cookie，会被浏览器清除

   • 没有设置失效时间的cookie称为会话cookie，浏览器关闭该cookie就会消失

   • //想长时间存在，设置Expires或Max-Age
     
     //Expires
     document.cookie = `username=alex; expires=${new Date('2100-1-01 00:00:00')}`
     
     //Max-Age
     //值为数字，表示当前时间+多少秒后过期，单位是秒
     //表示5s后过期
     document.cookie = `username=alex; max-age=5}`
     document.cookie = `username=alex; max-age=${24*3000}}`
     //0或负数，则会删除Cookie
     document.cookie = `username=alex; max-age=0}`
     
     
     

3. Domain域

   • 访问cookie的域名限制，只能访问在这个域名下cookie（不同域名）

   • //无法设置其他网站下的域名
     //使用JS只能读写当前域或父域的Cookie,无法读写其他域的Cookie
     document.cookie = 'username=alex; domain=www.imooc.com'
     //www.imooc.com当前域
     //.imooc.com父域名
     

   • 

4. Path路径

   • Path限定了Cookie访问范围（在同一域名，特定路径下）

   • 在目录下只能读写当前或上层路径的Cookie，不能读写下级路径的Cookie

     document.cookie = 'username=xuting; path=/course'
     

   当Name、Domain、Path这3个字段都相同的时候，才是同一个Cookie

5. HttpOnly

   • 设置了HttpOnly属性的Cookie不能通过JS去访问

6. Secure安全标志

   • Secure限定了只有在使用了https而不是http的情况下才可以发送给服务器

Domain\Path\Secure都要满足条件，还不能过期的Cookie才能随着请求发送到服务器端

1.3 Cookie工作原理

1. 创建Cookie

   当用户第一次浏览某个使用Cookie的网站时，该网站的服务器就进行了如下工作：

   • 该用户生成一个唯一的识别码（Cookie id）,创建一个Cookie对象
   • 默认情况下它是一个会话级别的Cookie，存储在浏览器的内存中，用户退出浏览器之后被删除。如果网站希望浏览器将该Cookie存储在磁盘上，则需要设置最大时效（maxAge），并给出一个以秒为单位的时间（将最大时效设为0则是命令浏览器删除该Cookie）；
   • 将Cookie放入到HTTP响应报头，将Cookie插入到一个Set-Cookie HTTP请求报头中
   • 发送该HTTP响应报头

2. 设置存储Cookie

   浏览器收到该响应报文之后，根据报文头里的Set-Cookied特殊的指示，生成响应的Cookie，保存在客户端。该Cookie里面记录着用户当前的信息

3. 发送Cookie

   当用户再次访问该网站时，浏览器首先检查所有存储的Cookies，如果某个存在该网站的Cookie（即该Cookie所声明的作用范围大于等于将要请求的资源），则把该Cookie附在请求资源的HTTP请求头上发送给服务器。

4. 读取Cookie

   服务器接收到用户的HTTP请求报文之后，从报文头获取到该用户的Cookie，从里面找到所需要的东西。

1.4 作用

根本作用就是在客户端存储用户访问网站的一些信息。典型的应用有

• 记住密码，下次自动登录
• 购物车功能
• 记录用户浏览数据，进行商品推荐

1.5 Cookie的缺点

1. 每个特定域名下的Cookie数量有限

   • IE6或以下：最多20个cookie
   • IE7及以上：最多50个cookie
   • FF：最多50个cookie
   • Opera：最多30个cookie
   • Chrome和safari没有硬件限制

   当超过单个域名限制之后，再设置cookie，浏览器就会清除以前设置的cookie。IE和Opera会清理近期最少使用的cookie，FF会随机清理cookie；

2. 存储量太小，只有4kb

3. Cookie会被附加在每个HTTP请求中，所以无形中增加了流量

4. 需要自己封装获取、设置、删除Cookie的方法

5. 由于HTTP请求中Cookie是明文传递的，所以安全性成问题（除非用HTTPS）

2. Session详解

2.1 简介

• Session代表服务器与浏览器的一次会话过程，这个过程是连续的，也可以时断时续的。
• Session是一种 服务器端 的机制，Session对象用来存储特定用户会话所需的信息。
• Session由服务端生成，保存在服务器的内存、缓存、硬盘或数据库中。

2.2 工作原理

1. 用户访问服务器
2. 服务器启用Session
3. 服务器为该用户创建一个SESSION
4. 创建 之前检查用户发来的请求里是否包含一个SESSION ID
   • 有，则说明之前该用户已经登录过并为此用户创建过SESSION，那么服务器就按这个ID把这个SESSION在服务器的内存中查找出来
   • 没有，则为该客户端创建一个SESSION并生成一个与此SESSION相关的SESSION ID。这个SESSION ID是唯一的、不重复的、不容易找到规律的字符串
5. SESSION ID将被在本次响应中返回到客户端保存，而保存这个SESSION ID的正是COOKIE

2.3 作用

• Session的根本作用就是在服务端存储用户和服务器会话的一些信息，典型的应用有：
  • 判断用户是否登录
  • 购物车功能

3. Cookie和Session的区别

	Cookie	Session
存放位置	客户端	服务端
存取方式	只能保管ASCII字符串，其他数据类型需要先进行编码	能够存取任何类型的数据，包括而不限于String\Integer\List\Map等。Session中也能直接保管Java Bean乃至任何Java类，对象等，运用起来十分便当
安全性	存储在客户端，对客户端是可见的，客户端的一些程序可能会窥探、复制以至修正Cookie中的内容；敏感信息如账号密码尽量不要写到Cookie中，最好进行Cookie信息加密，提交到服务器后再进行解密	存储在服务器上，对客户端是透明的，不存在敏感信息泄露的风险
有效期	只需要设置Cookie的过期时间属性为一个很大很大的数字，Cookie就可以在浏览器保存很长时间	由于Session依赖于名为JSESSIONID的Cookie，而Cookie JSESSIONID的过期时间默许为-1，只需关闭了浏览器（一次会话结束），该Session就会失效
对服务器造成的压力	保管在客户端，不占用服务器资源。假如并发阅读的用户十分多，Cookie是很好的选择。	保管在服务器端，每个用户都会产生一个Session。假如并发访问的用户十分多，会产生十分多的Session，耗费大量的内存
跨域支持上	支持跨域名访问	不支持跨域名访问

4. WebStorage

webstorage是HTML5新出的标签，是本地存储的解决方案之一，有sessionStorage与localStorage两种

在HTML5中，新加入了一个LocalStorage特性，这个特性主要是用来作为本地存储来使用的，解决了Cookie存储空间不足的问题（Cookie中每条Cookie的存储空间为4kb），LocalStorage中一般浏览器支持的是5M大小。

webstorage拥有封装好的方法，如setItem， getItem， removeItem，clear等。不像Cookie那样需要程序猿手动封装。Cookie的作用是与服务器进行交互，作为http规范的一部分存在为webstorage。而webstorage仅仅是为了在本地存储数据而生，它们都保存在客户端浏览器。

4.1. localStorage

4.1.1 初始 localStorage

1. 是什么？

   • localStorage也是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端
   • 单个域名下的localStorage总大小有限制

2. 在浏览器操作

   

3. localStorage的基本用法

   //存数据
   localStorage.setItem('username','xuting');
   //相同属性,值会覆盖
   localStorage.setItem('username','zhuzhu');
   
   //获取
   //获取属性key的值
   localStorage.getItem('username');
   //获取不存在的返回null
   
   //删除
   localStorage.removeItem('username');
   //删除不存在的key也不会报错
   
   //全部清空
   localStorage.clear();
   

4.1.2 localStorage 注意事项

1. 存储期限

   • 是持久化的本地存储，除非手动清除（×、clear、清除缓存），否则数据是永远不会过期的

sessionStorage

• 当会话结束（比如关闭浏览器）的时候，sessionStorage中的数据会被清空
• 增删改查和localStorage一样

2. 键和值的类型

   • 存储的键和值只能是字符串类型

   • 不是字符串类型也会转成字符串类型再存进去

   • //对象
     localStorage.setItem({},18);
     {}.toString()==>'[object,Object]'
     

3. 不同域名下不能共用localStorage

4. localStorage的兼容性

   • IE7以下版本不能兼容localStorage

4.2 Cookie,LocalStorage,SessionStorage三者区别

• Cookie始终在同源的HTTP请求中携带，即使不需要，Cookie在浏览器和服务器中来回传递。而LocalStorage和SessionStorage仅仅在本地存储，不会好服务器通信，也不会自动把数据发送给服务器。
• 存储大小不同，Cookie为4kb左右；localStorage， sessionStorage可以达到5M
• 数据有效期不同，sessionStorage仅在同源窗口中有效，关闭窗口就消失了，cookie可以设置过期时间，localStorage长期有效
• localStorage， sessionStorage有现成的API， cookie需要程序员手动封装

以上参考：https://blog.csdn.net/lizhengxv/article/details/81541977