cookie

计算机网络

概述：将不同的计算机通过网络应用使用对应的传输介质进行联通。

关键名词：

• 网络应用（比如：校园网拨号、宽带连接）
• 传输介质（比如：网线、wifi）

网络协议及其构成：

概述：网络OSI构成由7层构成。
分别是：

• 物理层
• 数据链路层
• 网络层
• 传输层
• 会话层
• 表示层

• 应用层

  
  
  image.png

TCP与UDP:

1. TCP使用对应的连接进行通信的。（就是说对应的通信设备一定要建立连接才行，如：外卖配送）
2. UDP使用丢包的形式进行通信的。（就是说对应的服务端只需要将对应的数据报包发送就行，客户端去接对应的数据报包，如：菜鸟驿站）

应用层的相关协议:

• FTP 文件传输协议
• TFTP 简单的文件传输协议
• SNMP 邮件传输协议
• HTTP 超文本传输协议 (基于TCP/IP)
• HTTPS 安全的超文本传输协议 (基于TCP/IP)
• P2P 金融传输协议
• NFS 蓝牙传输协议
• DNS 域名传输协议

HTTP与HTTPS：

1. HTTP采用明文传输，这种方式不安全，它的数据能获取，也能篡改
2. HTTPS采用密文传输，这种方式里面采用了openssl加密，里面有对称加密、非对称加密和CA证书。

前端和后端：

• 前端是提供对应的页面渲染操作（渲染页面）
• 后端是提供对应业务操作（提供数据）
  注意：后端和前端建立连接的根本是网络传输协议 （HTTP和HTTPS）。
  
  image.png

HTTP的几大特性：

• 无状态(没有状态)：无状态是指协议对于事务处理没有记忆能力没有办法区分对应的用户。（如：现在a用户登录淘宝，b用户也登录淘宝，a用户和b用户他没有办法区分，会导致a用户拿到了b用户的页面，b用户拿到了a用户的页面的问题）
• 无连接：无连接的含义是限制每次连接只处理一个请求。就是建立完连接后发送完数据就会马上断掉，连接不能保持。每次连接完毕，连接会马上断掉。(采用这种方式可以节省传输时间)
• 长连接/短连接

解决HTTP的无状态问题：

1. 因为对应的http的无状态问题导致我们可能在进行某项操作的时候，对应的后端不能准确的区分对应的访问者，这个时候我们就需要给每个对应的连接添加一个标识（sessionID）。
2. cookie就是用来存放sessionID。每次请求都要带上cookie才能区分对应的访问者。那么我们解决http的无状态问题就是通过发送对应的cookie来解决的，这个cookie里面会带上一个sessionID来用于区分。cookie是存放在浏览器上的。

Cookie

概述：cookie是为了解决http的无状态问题产生的，cookie里面以存储sessionID的方式来解决http的无状态问题，cookie是存放在浏览器上的。

cookie的特性：

• 存储在浏览器上的
• cookie的存储大小一般是4kb左右
• cookie会随请求而发送
• cookie可以跨域
• cookie可以设置过期时间
• cookie可以被篡改也可以伪造（cookie不安全）

cookie的存储格式：

• key=value 键值对象
• expires 过期时间设置
• path 在对应的路径下才携带cookie
• domain 跨域的域名
• secure 安全（写了代表安全，没写代表不安全）

key=value;expires=日期;path=地址;domain=域名;secure安全

cookie的相关操作：

概述：cookie是一个位于浏览器上的容器，具备增删改查的方法（document.cookie || chrom.cookies）。

• 增加方法（给对应的cookie里面进行赋值）

  //对应cookie进行赋值 增操作
  var date = new Date(2022,10,22)
  document.cookie = `name=123;expires=${date}`
  

• 删除方法 （设置对应的过期时间）

  //删除操作 就是设置过期时间为对应的当前时间 并不会马上删除 而是对应的浏览器关闭以后才会删除
  //如果当前时间已经过了 那么对应的cookie还是会存在
  var date = new Date()
  document.cookie = `name=jack;expires=${date}`
  

• 修改方法（给对应的cookie里面的存在的key进行重新赋值）

  //修改就对于已经有的key进行重新赋值操作
  //如果没有设置过期时间 那么默认的过期时间是session session的过期时间是浏览器关闭就清除
  document.cookie = 'name=jack'
  

• 查询方法（不赋值直接读取对应的cookie）

  //查询cookie 不赋值就是查询 显示的时候只会显示对应的key=value 其他并不会显示
  console.log(document.cookie);
  

cookie的相关操作的封装：

// 封装cookie相关操作
//获取方法 通过对应的key 获取对应的cookie的值
function get(key){
    var cookie = {} //用于存储所有的cookie相关的内容的
    //获取对应cookie的字符串  age=123; name=123
    var cookieStr = document.cookie
    var cookies = cookieStr.split(';')
    for(var c of cookies){
        //对应name=123进行分割
        var cookieArr = c.trim().split('=')
        //将第一个值当作key 第二个当作value {name:123}
        cookie[cookieArr[0]] = cookieArr[1]
    }
    return cookie[key]
}
//封装一个设置相关方法
//key=value;expires=时间;path=地址;domain=域名;secure
function set(key,value,expires,path,domain,secure){
    //如果没有key 直接报错
    if(!key){
        throw new Error('必须填入key值')
    }
    //如果没有value将value设置为空字符
    if(!value){
        value = ""
    }
    var cookieStr = `${key}=${value}`
    //如果对应的传入过期时间是日期类型
    if(expires instanceof Date){
        cookieStr += `;expires=${expires}`
    }
    // 如果有path
    if(path){
        cookieStr += `;path=${path}`
    }
    //如果有domain
    if(domain){
        cookieStr += `;domain=${domain}`
    }
    // 如果有secure
    if(secure){
        cookieStr += `;secure`
    }
    document.cookie = cookieStr
}
//删除方法 设置对应的过期时间
function remove(key,value,expires){
    set(key,value,new Date())
}   

第三方封装的cookie：

cookie.js（vue里面采用了

1. 下载js文件
2. 打开官网，看对应的demo（看源码）

<script src="./cookie.min.js"></script>
<script>
    //核心对象 window.Cookies
    //get 获取的 set 设置 remove 删除
    Cookies.set('name','tom')
    console.log(Cookies.get('name'));
    Cookies.remove('name','tom')
</script>

核心方法：

• set 设置cookie的方法
• get 获取cookie的方法
• remove 删除cookie的方法

JSON格式：

概述： json是一种数据传输的格式，对应的数据传输中会常用到json。

json传输格式的好处：

• 跨平台
• 跨语言

json格式的表示形式：

概述：json文件里面的key必须是字符串，字符串必须是双引号括起来。

1. 对象 {}

var json = {}

2. 数组 []

var json = []

JSON的序列化和反序列化：

1.序列化

概述：就是将一个json对象转为对应的字符串。(JSON.stringify())

//JSON.stringify() //转为json格式的字符串
var jsonStr = JSON.stringify(obj)
console.log(jsonStr);

2.反序列化

概述：将一个json格式字符串转为对应的对象。(JSON.parse())

//JSON.parse() //将json格式的字符串转换对应对象
var obj = JSON.parse(jsonStr)
console.log(obj);

本地缓存

• localStorage 本地缓存（持久化存在，不主动删除就一直存在）

//setItem 设置元素 key value
//getItem 获取元素 通过key来获取value
// removeItem 移除元素 根据key删除对应元素
localStorage.setItem('username','jack')
console.log(localStorage.getItem('username'));
localStorage.removeItem('username')

• sessionStorage 本地缓存 （跟服务器的session一致，只要关闭浏览器就没有了）

sessionStorage.setItem('password','123')
console.log(sessionStorage.getItem('password'));
sessionStorage.removeItem('password')

localstorage （作为客户端缓存）和sessionStorage （做服务端的缓存 用户信息）区别:

• localStorage 会持久化存在
• sessionStorage 浏览器关闭就没有了
• localStorage和sessionStorage存储地址不一样

localStorage和cookie的区别：

• localStorage存储大小为5M左右，cookie存储大小为4kb左右
• cookie会随请求发送，localStorage不会随请求发送
• cookie中存储的数据对应的类型较小（图片的base码） ，localStorage可以存储
• cookie可以跨域，localStorage不可以跨域
• cookie跨域设置对应的过期时间；localStorage不能，需要主动删除不然一直都在
• cookie和localStorage存储位置不一样

localStorage和cookie的共同点：

• localStorage和cookie都是存放对应的字符串
• localStorage和cookie都是位于浏览器上