cookie

计算机相关学科

数据结构 （算法、存储结构）

算法 （固定套路）

• 递归
• 贪心算法 （马拉车算法...）
• 回溯算法
• 排序算法
• DFS (深度优先搜索) BFS（广度优先搜索）
• 动态规划
• .....

逻辑结构和存储结构

• 数组 (查询快)
• 链表 （头节点 单向链表，双向链表、循环链表）（增删改快）
• 队列 （FIFO （先进先出））
• 栈 （先进后出）
• 树 ( 红黑树 二叉树) （mysql的底层的索引存储结构就是树 ）
• 图
• 散列表 (hash)
• 广义表
• ...

计算机组成原理

冯诺依曼原理

计算机网络

将对应的多台电脑的系统通过网络介质进行传播和共享。

shell 脚本

操作系统

相关系统原理及对应系统了解

windows （dos命令行）

cd #进入某个文件夹
ipconfig #查看当前网络配置
ping #测试当前的网络通畅
cls #清除命令行内容

linux （linux指令）

ls  #查看对应的文件夹下的内容
vm #使用vim编辑器
clear #清除命令行内容

计算机网络相关知识

概述

计算机网络是指将地理位置不同的具有独立功能的多台计算机及其外部设备，通过通信线路和通信设备连接起来，在网络操作系统，网络管理软件及网络通信协议的管理和协调下，实现资源共享和信息传递的计算机系统。

网络操作系统

是一种能代替操作系统的软件程序，是网络的心脏和灵魂，是向网络计算机提供服务的特殊的操作系统。借由网络达到互相传递数据与各种消息，分为服务器（Server）及客户端（Client）（CS架构）

网络管理软件

网络管理软件就是能够完成网络管理功能的网络管理系统，简称网管系统。借助于网管系统，网络管理员不仅可以经由网络管理员与被管理系统中代理交换网络信息，而且可以开发网络管理应用程序。

网络通信协议

网络通信协议是一种网络通用语言，为连接不同操作系统和不同硬件体系结构的互联网络提供通信支持，是一种网络通用语言。

网络分类

• 局域网
• 广域网
• 城域网
• 无限网

性能相关指标

• 速率
• 带宽
• 时延
• 利用率
• 丢包率

通信方式

• 电话 （直通的）
• 分组 （将数据报包（data packect）进行分组 报文头（header） 报文（主要数据）*）
• 报文

网络（OSI）七层模型

• 物理层（是参考模型中的最底层，主要定义了系统的电气、机械、过程和功能标准）
• 数据链路层 （是在通信实体间建立数据链路联接，传输的基本单位为“帧”，并为网络层提供差错控制和流量控制服务）
• 网络层 （主要为数据在节点之间传输创建逻辑链路，通过路由选择算法为分组选择最佳路径，从而实现拥塞控制、网络互联等功能）
• 传输层（是网络体系结构中高低层之间衔接的一个接口层。传输层不仅仅是一个单独的结构层，而是整个分析体系协议的核心。传输层主要为用户提供End—to—End(端到端)服务，处理数据报错误、数据包次序等传输问题。）
• 会话层（主要功能是负责维护两个节点之间的传输联接，确保点到点传输不中断，以及管理数据交换等功能）
• 表示层 （为在应用过程之间传送的信息提供表示方法的服务）
• 应用层 （应用层中包含了若干独立的用户通用服务协议模块，为网络用户之间的通信提供专用的程序服务。）

TCP/IP协议

应用较多一个标准网络传输协议，主要核心 TCP 协议 IP 协议。

• IP协议根据端到端的设计原则，IP只为主机提供一种无连接、不可靠的、尽力而为的数据包传输服务
• TCP协议是一种面向连接的、可靠的、基于字节流的传输层通信协议

TCP 和 UDP的区别 （*）

• TCP 是面向连接的。数据的发送必须要建立连接，通过连接的渠道发送对应的字节流数据
• UDP 是无连接的。数据发送不需要建立连接通过对应的数据报包的形式进行数据的发送
• TCP 是一对一传输的，而UDP可以一对多进行传输
• UDP信息报文的报文头很短，只有8字节，相对于TCP的20字节报文信息，UDP的报文头开销很小
• TCP安全、可靠、面向连接，但是传输速度慢。UDP不安全、不可靠、面向非连接，但是传输速度快。

TCP的三次握手和四处挥手 （*）

TCP三次握手说的是对应的建立连接的过程

• 客户端发送请求到服务器端要求建立连接
• 服务端收到信息 并返回确认信息
• 客户端收到确认信息，建立连接

TCP四次挥手说的是断开连接的过程

• 客户端发送断开连接的请求
• 服务器端接收断开连接的请求，并返回确认信息
• 服务器端断开连接
• 客户端断开连接

应用层相关协议

• TeInet 远程登录协议
• FTP 文件传输协议
• HTTP 超文本传输协议
• SNMP 简单网络管理协议
• TFTP 简单文件传输协议
• NFS 网络文件传输协议
• ....

HTTP 和 HTTPS *

• HTTP 使用明文传输（不安全） 端口 80
• HTTPS 使用密文（OPENSSL 进行加密 （对称加密 非对称加密 hash加密））传输 （安全） 端口 443
• HTTP和HTTPS都是基于TCP/IP协议的

HTTP版本划分 *

• 1.0 版本 基础版本 （短连接）
• 1.1 版本 进阶版本 （长连接）
• 2.0 版本 最新版本

相关区别

• 1.1版本在1.0之上进行增强，主要是支持长连接（新增了一个catch的属性和 Connection:keep-alive字段 在对应的报文头上新增了host属性），新增的请求方式（1.0的请求方法 GET POST）OPTION、DELETE、PATCH、CONNECTION、HEAD。数据进行压缩（新增传输模式（流水线 非流水线））新增对应的状态码（409 、410）
• 1.0版本的强制缓存是通过expires属性来指定的 1.1是通过catch-control属性来指定的
• 2.0版本在1.1版本进行增强、主要支持多路复用（2.0之前一个连接只能发生一个请求、多个请求共有一个连接）一个请求的域名下的连接包含这个域名的所有请求。（2.0主要传输的数据以流传输 2.0之前是以文件传输）HTTP2.0使用HPACK算法对 header 的数据进行压缩

1.1 的流水线和非流水线式

流水线方式是客户端在收到HTTP的响应报文之前就能接着发送新的请求报文（不断的push请求过去，和工厂流水线一样，让S端处理）。当然，HTTP服务器S端得按照客户请求的顺序响应，以保证客户端能够区分出其每次请求的响应内容。 非流水线方式是客户在收到前一个响应后才能发送下一个请求。

http的特点

• 无状态 （客户端发送的请求 服务器端无法区分）
• 无连接 （连接建立就会完成就会关闭）
• 长连接/短连接
• ...

Cookie

概述

cookie是一个位于浏览器端的本地存储（大小一般在4kb左右），它会随请求发送。

解决http的无状态问题

• 俩个客户端访问同一个服务器地址（www.baidu.com）, 一个搜索鞋子一个搜索衣服，这个时候由于http的无状态问题，服务器并不能准备区分对应的客户端，会导致数据发送错误（搜索鞋子的拿到衣服的数据，搜索衣服的拿到鞋子的数据）。为解决这个无状态问题，客户端必须携带对应的标识让我服务端进行区分。那么如果标识是客户端随意捏造的那么会导致服务端无法区分。
• 最好的解决方式就是由服务端产生一个标识（sessionID）分发给对应的客户端，在客户端上需要存储这个标识 （sessionID）存储的技术就叫做cookie，客户端在请求的时候再携带的这个标识（sessionID）。为了准确区分那么对应服务端产生的标识必须存储在对应的服务端上（session），服务器端才能准确验证，那么就完美解决了http的无状态问题。

综上可得，解决http的无状态问题主要是通过sessionID来解决的，而客户端存储sessionID的容器就是cookie，所以cookie的诞生解决了http的无状态问题。

cookie的获取

主要返回的是一个字符串（只会显示前面的键值对）

//获取到是一个字符串 这个属性是可以设置 只会显示键值对其他属性不会显示
console.log(document.cookie)

cookie的显示格式

name=value;expires=过期时间;domain=跨域地址;path=携带cookie的路径;secure是否使用https

键值对

//赋值就是设置
document.cookie = 'username=jack'

expires 过期时间设置（默认为session 浏览器关闭就过期）

• 时间过期了是不会添加的

//指定过期时间 expires值是一个日期对象
document.cookie = 'username=jack;expires='+new Date('2042/10/10')

domain 指定跨域地址 （默认为当前地址）

//指定跨域地址
document.cookie = 'username=jack;expires='+new Date('2042/10/10')+';domain=.baidu.com'

path 指定携带路径

//指定携带地址
document.cookie = 'username=jack;expires='+new Date('2042/10/10')+';domain=.baidu.com;path=/hello'

secure 是否采用https

//采用https
document.cookie = 'username=jack;expires='+new Date('2042/10/10')+';domain=.baidu.com;path=/hello;secure'

cookie的特点 （*）

• cookie存储只有4kb左右
• cookie会随请求携带
• cookie存储形式为字符串
• cookie可以指定过期时间
• cookie可以跨域（domain）
• cookie不安全（可以伪造和篡改）

cookie的操作封装

给document.cookie进行赋值可以添加新的cookie、如果这个cookie的name存在那么就是修改

//增 改
//传入的cooke的名字 传入对应的值  传入的是配置对象 {expires:new Date(),domian:'',path:'',secure:false}
function setCookie(name, value, configur) {
    //cookie的设置其实就是给document.cookie进行赋值操作
    //name=value;expires=过期时间;domain='';path='';secure
    //判断是否传入必传项
    if (arguments.length < 2) {
        throw new Error('缺少参数')
    }
    //判断必传项类型是否正确
    if (typeof name != 'string' && typeof name == 'undefined') {
        throw new TypeError('类型错误')
    }
    var cookieStr = `${name}=${value};`
    //如果传入了configur 那么需要将它进行连接 for in 遍历对象的 遍历的是对象的key
    for (var key in configur) {
        //key是遍历configur对象中的字符串属性
        //如果当前的key为expires 且对应的值的类型为日期
        // if (key == 'expires' && configur[key] instanceof Date) {
        //   cookieStr += `${key}=${configur[key]};`
        // }
        //如果key为domain 或者是path
        if ((key == 'domian' || key == 'path') && typeof configur[key] == 'string' || key == 'expires' && configur[key] instanceof Date) {
            cookieStr += `${key}=${configur[key]};`
        }
        //如果key为secure 里面的值为true
        if (key == 'secure' && configur[key]) {
            cookieStr += `secure`
        }
    }
    //设置字符串到cookie中
    document.cookie = cookieStr
}

获取cookie的方法

//根据name来获取对应的cookie的值
function getCookie(name) {
    //如果name没有传递 返回所有的cookie 传递了就返回当前值
    //username=jack; password=123456 用对象存储
    var cookieStr = document.cookie
    var cookie = {}
    //截取对应的内容 添加到对象中
    var arr = cookieStr.split(';')
    //遍历数组
    arr.forEach(function (v) {
        //去除前后空格
        v = v.trim()
        cookie[v.split('=')[0]] = v.split('=')[1]
    })
    //如果name传入了返回值 没有返回所有的cookie
    return name ? cookie[name] : cookie
}

删除cookie的方法（设置cookie过期就是删除）

//移除cookie 根据name来移除
function removeCookie(name){
    //删除cookie的方式就是设置cookie的expires属性为过期时间 （24小时内）
    setCookie(name,'',{
        //设置过期时间为当前时间减去100毫秒
        expires: new Date(Date.now()-100)
    })
}
//清除所有的cookie
function clearAll(){
    //获取所有的name 调用removeCookie的方法
    let cookie =  getCookie() //获取所有的cookie
    for(var key in cookie){
        removeCookie(key)
    }
}

相关方法（传入字符串返回字符串）*

• decodeURIComponent 解码
• encodeURIComponent 编码

第三方cookie.js的使用

其一

cdn地址

gitee文档地址

基础使用

console.log(Cookies)
//设置
Cookies.set('hello','你好')
Cookies.set('hello','你好')
//获取
console.log(Cookies.get('hello'))
//删除
Cookies.remove('hello')

其二

cdn地址

gitee文档地址

基础使用

cookie('test', 'tank', 1)    // 创建一个从现在起1天后过期的cookie
cookie('test')               // 创建一个在整个网站上有效的cookie
cookie('test', null)         // 删除cookie`test`
cookie()                     // 获取所有cookie
cookie.set('test', 'tank', 1) // ====cookie('test', 'tank', 1)
cookie.get('test')            // ====cookie('test')
cookie.remove('test')         // ====cookie('test',null)
cookie.remove('test3', 'test4') // 删除cookie `test3` 和 `test4`
cookie.clear()                // 清理所有cookie
cookie.all()                  // 获取所有cookie

本地存储

• localStorage 本地存储（除非手动删除 不然是不能删除的）
• sessionStorage 本地存储 （浏览器关闭自动删除 session的生命周期）

相关方法

• setItem 设置数据进入（可以添加可以修改） 传入key和值
• getItem 获取数据 （返回数据）通过key来获取值
• removeItem 删除数据 通过key来删除

共同点

• 存储的数据都是字符串
• 他们都是位于浏览器的本地存储（可以篡改和伪造）

localstorage 和 cookie区别 *

• localstorage的存储大小大概是4M-10M（5M左右），cookie存储大小为4kb左右
• cookie会随请求发送，localstorage不会随请求发送
• cookie可以跨域，localstorage不会跨域
• cookie只能存储短的字符串，localstorage能存储base64的字符串
• cookie和localstorage在浏览器上的存储位置不一致

tooken存储

tooken（令牌）用于登录验证的（JWT （JSON WEB TOOKEN））。

流程

• 输入用户名密码点击登录
• 发送用户名及密码给服务器
• 服务器验证用户名密码 成功返回tooken
• 浏览器获取服务器返回的tooken 存储起来（本地存储 localstorage 或者 sessionStorage）
• 下次访问服务器就需要取出里面的tooken带上 （放在请求头）

JSON格式

json是一种数据交互格式，一般用于数据传输（跨语言跨平台）。

JSON格式的显示形式

对象显示

var jsonStr = "{}"

数组显示

var jsonStr = "[]"

json格式的对象里面的key必须使用双引号包起来，里面的字符串不能使用单引号（双引号）。

js中字面量的声明对象就是{} 声明数组就是[] 所以在对应的js中对象和json格式字符串可以互相转换

相关转换方法

字符串转为js对象 JSON.parse

//json格式字符串转为对象
var jsonStr = '{"name":"jack"}'
//JSON.parse方法返回一个对象
console.log(JSON.parse(jsonStr)) //{name:"jack"}

对象转换json格式字符串 JSON.stringify

//对象转换json格式字符串
var obj = {age:18,username:'rose'}
//JSON.stringify方法返回一个字符串
console.log(JSON.stringify(obj))

隐式转换为字符串会默认调用toString方法

//隐式转换为字符串 （toString）
console.log({
    naem: 'jack'
}+"") //[object object]