day13 cookie

计算机重要的四个内容

• 数据结构
  数据存储的结构及其逻辑的体现,以及相关数据结构之间的操作(算法)
• 操作系统
  windows(dos命令),linux(指令操作)
• 计算机组成原理
  冯诺依曼(主板 CPU 内存条 显卡 硬盘)
• 计算机网络
  网络通信就是指代一台计算机利用传播介质传播到另一台计算机的数据通信过程.

计算机网络 

概述

计算机网络主要概述的是一台计算机利用传播介质传播到另一台计算机的数据通信过程.

主要的内容

• 网络应用 宽带拨号软件
• 传播介质 网线 wifi
• 协议

网络模型图 

• 物理层 硬件支持
• 数据链路层 数据传输的接口规范
• 网络层 网络通信
          ip协议 ip4 ip6(DNS分配)
• 传输层 主要协议支持
          TCP 一对一传输(必须建立连接)
          UDP丢包的形式(可以一对多 多对多 多对一)
• (应用层 会话层 表示层)应用层相关的内容(应用层相关协议都是来于对应底层的支持)

TCP和UDP的区别

TCP必须建立连接(只能1对1)他是以字节流的形式发送数据的 他的头有64个字节

UDP不一定要建立连接 通过发送数据报包的形式发送数据 他的头只有8个字节

应用层相关的协议

http,https超文本传输协议

• http使用明文传输
• https使用密文传输(ssl进行加密 采用了对称加密及非对称加密 为了安全还提供对应的CA证书) 

http有版本差距http1 http2(http1和http2的区别)

• http1以文件传输形式进行传输(一个请求要有一个连接)
• http2以流的形式进行传输(多路复用 一个连接支持多个请求 同域名下只有一个连接) 

http的讲解 

概述

http称为超文本传输协议,一般用于网络传输(一般是对应的数据交互),一般交互的数据为json格式数据(字符串),xml(类似于html).http是基于tcp之上的协议.

数据的交互过程(tcp三次握手 四次挥手)

建立连接的过程 称为三次握手

• 客户端先发送一个信息 告诉他我要连接
• 服务端接收到 我已经准备好了
• 客户端收到 建立连接

 断开连接的过程 称为四次挥手

• 客户端发送断开连接请求
• 服务端收到断开连接请求
• 服务端断开连接
• 客户端断开连接

 http的对应的特性

• 无状态(当前a发送一个请求到b b接收到以后不知道是a 没有记忆能力无法发送请求的人)
• 无连接(请求发送完建立连接以后会立马断开)
• 长连接 短连接
• ...

解决对应的无状态问题

主要是通过对应的session(存储在服务端上的)来解决的,每个连接的建立都会存在一个对应的sessionId这个sessionId是由服务端派发给对应的浏览器的 连接断开以后对应的sessionId就不在了,为了解决这个问题,sessionId存储在浏览器上,每次请求都会带上这个sessionId(cookie).在浏览器用于存储sessionId的容器叫cookie.如果我对应的服务器关闭那么对应的存储sessionId就没有意义了,所有cookie也没有意义了,那么cookie既然存储在对应的浏览器上就不应该被销毁那么时间一长对应的cookie就会越来越大,这点对我们是不好的.所以为了避免这点他将我们的cookie和session的生命周期做了绑定也就是说默认情况下对应的cookie的生命周期和session的生命周期是一样的.session的生命周期是连接一断开他就销毁了(浏览器一关闭就销毁session cookie)

cookie讲解 

cookie的结构

cookie里面存储的内容是一个字符串

//cookie的名字 name cookie的值 value
//expires 过期时间 如果没有设置默认情况 浏览器关闭就是销毁 如果设置了那么在对应的时间就会销毁
//domain 跨域的地址设置
//path 什么路径下才携带cookie
//secure 是否为https
name=value;expires=Date;domain=地址;path=路径;secure

cookie的访问

console.log(document.cookie) //显示的过程中只会显示 对应的 name=value
//cookie的添加
document.cookie = `name=张三;expires=${new
Date()};domain=http://127.0.0.1;path=/hello;secure`

cookie的操作方法

//添加cookie 修改
//name value 传入一个option 设置对象
function addCookie(name,value,option){
if(!name){
throw new Error('参数错误')
}
var cookieStr = `${name}=${value}`
//判断option中是否存在对应的配置
//instanceof 检索引用数据类型的类型
if(option){
if(option.expires instanceof Date){
cookieStr += `;expires=${option.expires}`
}
if(option.domain){
cookieStr += `;domain=${option.domain}`
}
if(option.path){
cookieStr += `;path=${option.path}`
}
if(option.secure){
cookieStr += ';secure'
}
}
document.cookie = cookieStr
}
//删除
//过期时间设置为当前时间
function removeCookie(name){
addCookie(name,null,{
expires:new Date()
})
}
//封装对应的获取所有的cookie方法
function getCookieValue(name){
var cookieStr = document.cookie
var cookie = {}
//分号分割
var cookieStrArr = cookieStr.split(';')
for(var str of cookieStrArr){
var arr = str.trim().split('=')
cookie[arr[0]] = arr[1]
}
return cookie[name]
}

第三方的cookie.js库(vue2的cookie里引入cookie.js)

• set 设置
• get 获取
• remove 删除
• clear 清除所有
• all 打印所有的cookie

  cookie.set('hello', '你好')
  console.log(cookie.get('hello'))
  cookie.remove('hello')
  cookie.clear() // 清理所有cookie
  cookie.all()

  cookie.js: 本地存储cookie的封装，提供简单的AIP

cookie的特性

• cookie随请求发送(每次请求都会携带cookie)
• cookie存储在浏览器上 默认的生命周期为session(浏览器关闭就销毁)
• cookie设置持久化是利用对应的expires属性来设置对应的持久化时间
• cookie的大小只有4kb左右(浏览器不同他就不同)
• cookie里面存储的数据都是字符串
• cookie可以跨域携带(domain)
• cookie不安全(被篡改 被伪造) 

localStorage sessionStorage 本地存储

对应的方法 

• setItem设置元素 key:value
• getItem 获取元素 key

  //只能存字符串
  localStorage.setItem('name','jack')
  console.log(localStorage.getItem('name'))
  sessionStorage.setItem('name','tom')
  console.log(sessionStorage.getItem('name'))

localStorage和sessionStorage的区别

localStorage关闭浏览器数据依然存在 sessionStorage浏览器关闭数据就会被清除

localStorage,sessionStorage和cookie的区别

不同点

• cookie会随请求发送 localStorage ,sessionStorage不会
• cookie只有4kb左右 localStorage一般是4-10MB(5MB)
• cookie存储的位置  localStorage ,sessionStorage存储位置不一致
• cookie不能存储复杂的数据 localStorage ,sessionStorage跨域存储
• sessionStorage默认浏览器关闭就销毁 cookie默认跟session一样通过expires来设置过期时间 localStorage永久(手动删除)

 相同点

• 都是存储在浏览器上的(容易被篡改)
• 都是以字符串的形式进行存储的

JSON格式 

JSON格式是一种数据交互格式,一般后台给我们返回的是json格式的字符串,但是在js中可以将json格式的字符串变为对象.

交互图(主要JSON格式数据进行交互)

•  后端主要提供数据(数据处理(业务)三层模型)
• 前段主要负责渲染(部分业务前移 三层模型(业务分离))
• 后端给我们返回JSON格式字符串 前段进行解析成对象,然后进行数据渲染

主要表现形式(数组和对象可以多级嵌套)

• 对象{}
• 数组[] 

  var json = {likes:[{name:'苹果',price:50}],age:18}
  //获取苹果的价格
  console.log(json.likes[0].price)
  var jsonArr = [{name:'张三'},{name:'李四'},{name:'王五'}]
  //获取王五
  console.log(jsonArr[2].name)

对象转为JSON格式字符串(序列化)

JSON这个类是帮助我们来处理JSON格式数据的 里面提供对应的序列化及反序列化方法

JSON.stringify 将对应的对象转为json格式的字符串

//toString 转为的字符串有问题 默认形式的转换字符串用的就是toString
console.log(obj.toString()) //[object object]
//利用序列化方法来完成转换成json格式字符串
var str = JSON.stringify(obj)

JSON格式字符串转为对象(反序列化)

JSON.parse 将对应的字符串转为对象

//将对应的字符串转为对象 反序列化方法
//eval 方法也能转换 执行里面的js （不安全 会直接执行里面的函数）
// console.log(eval(str))
//JSON.parse JSON格式字符串必须是双引号修饰的
console.log(JSON.parse(str)) //传入对应的字符串 返回一个对象