Cookie

关于对应的计算机的一些基础课程

• 数据结构 (leetcode)

  逻辑结构

  存储结构 （数组，字符串，栈，队列，图，hash，树、链表...）

  算法 （递归算法（BFS(广度优先查找)，DFS（深度优先查找））、 动态规划 （DP）、贪心算法（马拉车算法）、排序算法....）

• 操作系统 (系统相关的操作)

  windows 、 linux （指令 服务器部署） 、 mac

• 计算机组成原理

  冯诺依曼 （cpu 内存条 硬盘 （ 显卡））

• 计算机网络

  网络的构成及相关的协议

计算机网络

概述：

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

关键名词：

• 网络应用 （校园网拨号、宽带连接）

• 传输介质（网线、wifi）

网络协议及其构成

概述：

• 网络OSI构成由七层构成。（物理层、数据链路层、网络层、传输层、会话层、表示层、应用层）。

TCP和UDP（传输层的通信协议 基于网络层的IP协议）

TCP使用对应的连接进行通信的，也就是说对应的通信设备一定要建立连接。（外卖配送）

UDP采用丢包的形式进行通信的，就是说对应的服务端只需要将对应的数据报包发送就好了，客户端需要去获取对应的数据报包。（菜鸟驿站）

应用层的相关协议

• FTP 文件传输协议

• TFTP 简单的文件传输协议

• SNMP 邮件传输协议

• HTTP 超文本传输协议 (基于TCP/IP)

• HTTPS 安全的超文本传输协议 (基于TCP/IP)

• P2P 金融传输协议

• NFS 蓝牙传输协议

• DNS 域名传输协议

• ....

HTTP和HTTPS

HTTP采用明文传输（不安全 能获取 能篡改）

HTTPS采用密文传输 （里面采用了openssl 里面有对称加密 和 非对称加密 及 CA证书）

后端和前端

• 后端是提供对应业务操作（提供数据）

• 前端是提供对应的页面渲染操作

后端和前端建立连接的根本是网络传输协议 （HTTP和HTTPS）

HTTP的几大特性

• 无状态 （没有状态）

  没有办法区分对应的用户。现在a用户登录淘宝，b用户也登录淘宝，a用户和b用户他没有办法区分（a用户拿到了b用户的页面 b用户拿到了a用户的页面）

• 无连接

  就是发送完数据建立完连接就会马上断掉。连接不能保持（每次连接完毕 连接会马上断掉）。

• 长连接/短连接

解决HTTP的无状态问题

• 因为对应的http的无状态问题导致我们可能在进行某项操作的时候，对应的后端不能准确的区分对应的访问者，这个时候我们就需要给每个对应的连接添加一个标识（sessionID）。sessionID需要每次都带过去，那么我们应该放在哪？

• 这个时候cookie就应运而生了。(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=地址;domain=域名;secure安全

• key=value 键值对象

• expires 过期时间设置

• path 在对应的路径下才携带cookie

• 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.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 设置方法

• get 获取方法

• remove 删除方法

JSON格式

概述： json是一种数据传输的格式，对应的数据传输中以后会常用到json。json传输格式的好处（跨平台、跨语言）

json格式的表示形式

对象 {}

var json = {}

数组 []

var json = []

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

JSON的序列化和反序列化

序列化 （就是将一个json对象转为对应的字符串）JSON.stringify()

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

反序列化 （将一个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都是位于浏览器上