Cookies

1、encodeURIComponent()

encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。

const str = 'http://www.w3school.com.cn'
const result = encodeURIComponent(str)

console.log(result)
// http%3A%2F%2Fwww.w3school.com.cn

---

2、decodeURIComponent()

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

const str = 'http://www.w3school.com.cn'
const result = encodeURIComponent(str)

console.log(result)
// http%3A%2F%2Fwww.w3school.com.cn

const res = decodeURIComponent(result)
console.log(res)

// http://www.w3school.com.cn

---

3、toGMTString()

toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果。

const date = new Date()
console.log(date)
// 2020-07-02T01:42:09.032Z

console.log(date.toGMTString())
// Thu, 02 Jul 2020 01:42:09 GMT

---

4、cookie的基本概念

cookie是一个保存在客户机中的简单的文本文件, cookie是document的属性

主要功能：

• 解决http无状态的缺点
• 在客户端存储一些其它的数据

我们知道，http协议本身是一种无状态的协议，而这就意味着如果用户向我们的应用提供了用户名和密码来进行用户认证，那么下一次请求时，用户还要再一次进行用户认证才行，因为根据http协议，我们并不能知道是哪个用户发送的请求，所以为了让我们的应用能识别是哪个用户发出的，我们只能在服务器存储一份用户登陆的信息，这份登陆信息会在响应时传递给客户端，告诉其保存为cookie，以便下次请求时发送给我们的服务器，这样我们的服务器就能识别请求来自哪个用户了，这就是传统的基于sessino认证

cookie的构成

• name：一个唯一确定cookie的名称
• value：存储在cookie中的字符串值，值必须被URL编码
• domain：cookie对于哪个域是有效的，所有向该域发送的请求都会包含这个cookie信息
• path：对于指定域中的路径，应该向服务器发送cookie
• expires: 表示cookie何时应该被删除的时间戳
• secure：安全设置，指明必须通过安全的通信通道来传输(HTTPS)才能获取 cookie,通过普通的HTTP是无法获取cookie(此cookie已指明是由secure保存的)的，即使本地也不行

---

5、cookie的生成方式

• 由服务器发送http响应时指定Set-Cookie进行指定
• 使用js生成cookie

使用js 生成cookie的方式

• 自定义对象方式
• 使用插件

自定义对象方式

const CookieUtil = {
    get(name) {
        let cookieName = encodeURIComponent(name) + "="
        let cookieStart = document.cookie.indexOf(cookieName)
        let cookieValue = null
        if(cookieStart > -1) {
          let cookieEnd = document.cookie.indexOf(";", cookieStart)
          if (cookieEnd == -1) {
            cookieEnd = document.cookie.length;
          }
          cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
         }
         return cookieValue;
    },
    set(name, value, expires, path, domain, secure) {
        let cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value)
        console.log('cookieText', cookieText);
        if(expires instanceof Date) {
          cookieText += ";expires=" + expires.toGMTString();
        }
        if(path) {
          cookieText += ";path=" + path;
        }
        if(domain) {
          cookieText += ";domain=" + domain;
        }
        if(secure) {
          cookieText += ";secure";
        }
        document.cookie = cookieText;
    },
    remove(name, path, domain, secure) {
      this.set(name, "", new Date(0), path, domain, secure);
    }
}

CookieUtil.set("lang", "en")
CookieUtil.get("lang")

js-cookie插件

// npm install js-cookie --save
import Cookies from 'js-cookie'

// set
Cookies.set('name', 'value')
Cookies.set('name', 'value', { expires: 7 })
Cookies.set('name', 'value', { expires: 7, path: '' })

// get
Cookies.get()
<!--get all visible cookies-->
Cookies.get('name')
Cookies.get('nothing')
// 不存在的cookie返回undefined

// remove
Cookies.remove('name')
Cookies.set('name', 'value', { path: '' })
Cookies.remove('name')
Cookies.remove('name', { path: '' })

// 设置对象
const user = { name: 'Tom', age: 18 }
Cookies.set('user', user)
const userInfo = JSON.parse(Cookies.get('user'))
console.log(userInfo)

---

6、cookie的缺陷

• cookie需要在客户端与服务器之间来回传递，会浪费不必要的资源
• cookie的存储大小有限制，对于每个域，一般只能设置20个cookie，每个cookie大小不能超过4KB
• cookie的安全性，cookie因为保存在客户端中，其中包含的任何数据都可以被他人访问，cookie安全性比较低

---

7、cookie认证机制

Cookie技术是客户端的解决方案，Cookie就是由服务器发给客户端的特殊信息，而这些信息以文本文件的方式存放在客户端，然后客户端每次向服务器发送请求的时候都会带上这些特殊的信息。

让我们说得更具体一些：当用户使用浏览器访问一个支持Cookie的网站的时候，用户会提供包括用户名在内的个人信息并且提交至服务器；接着，服务器在向客户端回传相应的超文本的同时也会发回这些个人信息，当然这些信息并不是存放在HTTP响应体（Response Body）中的，而是存放于HTTP响应头（Response Header）；

当客户端浏览器接收到来自服务器的响应之后，浏览器会将这些信息存放在一个统一的位置，对于Windows操作系统而言，我们可以从： [系统盘]:\Documents and Settings[用户名]\Cookies目录中找到存储的Cookie；自此，客户端再向服务器发送请求的时候，都会把相应的Cookie再次发回至服务器。而这次，Cookie信息则存放在HTTP请求头（Request Header）了。

有了Cookie这样的技术实现，服务器在接收到来自客户端浏览器的请求之后，就能够通过分析存放于请求头的Cookie得到客户端特有的信息，从而动态生成与该客户端相对应的内容。

通常，我们可以从很多网站的登录界面中看到“请记住我”这样的选项，如果你勾选了它之后再登录，那么在下一次访问该网站的时候就不需要进行重复而繁琐的登录动作了，而这个功能就是通过Cookie实现的。

在程序中，会话跟踪是很重要的事情。理论上，一个用户的所有请求操作都应该属于同一个会话，而另一个用户的所有请求操作则应该属于另一个会话，二者不能混淆。例如，用户A在超市购买的任何商品都应该放在A的购物车内，不论是用户A什么时间购买的，这都是属于同一个会话的，不能放入用户B或用户C的购物车内，这不属于同一个会话

而Web应用程序是使用HTTP协议传输数据的。HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。即用户A购买了一件商品放入购物车内，当再次购买商品时服务器已经无法判断该购买行为是属于用户A的会话还是用户B的会话了。要跟踪该会话，必须引入一种机制。
Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。在Session出现之前，基本上所有的网站都采用Cookie来跟踪会话。

如果你把Cookies看成为http协议的一个扩展的话，理解起来就容易的多了，其实本质上cookies就是http的一个扩展。

有两个http头部是专门负责设置以及发送cookie的,它们分别是Set-Cookie以及Cookie。当服务器返回给客户端一个http响应信息时，其中如果包含Set-Cookie这个头部时，意思就是指示客户端建立一个cookie，并且在后续的http请求中自动发送这个cookie到服务器端，直到这个cookie过期。

如果cookie的生存时间是整个会话期间的话，那么浏览器会将cookie保存在内存中，浏览器关闭时就会自动清除这个cookie。另外一种情况就是保存在客户端的硬盘中，浏览器关闭的话，该cookie也不会被清除，下次打开浏览器访问对应网站时，这个cookie就会自动再次发送到服务器端。

一个cookie的设置以及发送过程分为以下四步：

• 客户端发送一个http请求到服务器端
• 服务器端发送一个http响应到客户端
• 其中包含Set-Cookie头部 客户端发送一个http请求到服务器端
• 其中包含Cookie头部 服务器端发送一个http响应到客户端

---