Cookies

2020-10-08  本文已影响0人  懂会悟

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协议，我们并不能知道是哪个用户发送的请求，所以为了让我们的应用能识别是哪个用户发出的，我们只能在服务器存储一份用户登陆的信息，这份登陆信息会在响应时传递给客户端，告诉其保存为cookie，以便下次请求时发送给我们的服务器，这样我们的服务器就能识别请求来自哪个用户了，这就是传统的基于sessino认证

cookie的构成

5、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的缺陷

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的设置以及发送过程分为以下四步：

上一篇下一篇

猜你喜欢

热点阅读