事件回顾及计算机网络相关知识 及cookie

cancer
163 阅读7分钟

内容回顾

事件分类
  • 鼠标事件（ onmousedouwn onmouseup onmousemove....）
  • 键盘事件（keydown.keyup.keypress）
  • HTML事件 （breforunload.load .focus.blur .input）

事件流的传播机制

  • 捕获阶段
  • 目标阶段
  • 冒泡阶段

event对象属性

target .currentTarget . screenX. screenY. clientX. lientY. offsetX .offseY pageX pageY button type keyCode charcode shiftKey altKey....

阻止事件冒泡的方式

  • stoPropagation 方法
  • cancleBubble属性 （赋值为true）

阻止默认行为的方式

  • preventDefault
  • returnvalue 属性 （赋值为false）
  • return false

事件委托机制

将事件委托给父元素，通过target属性来找到实际触发目标元素

时间监听器

addEventListener 添加时间监听器 removeEventListener 移除事件监听器

ecent相关派发方法

dispatchEvent（执行事件）

重绘和回流

  • 重绘是对于页面的样式发生变化，在不发生页面布局的情况下 发生对应的重新渲染

  • 回流 页面的布局（位置和大小）发生变化 或者是对应的 获取某些属性值（offsetLeft offsetHeight）

display：none 和visbility ：hidden 的区别

  • display：none 是消失在页面上（等于页面没有这个元素，不能去获取对应的属性 offsetWidth .offsetHeight...）
  • display：none 消失在页面上 （爬虫不会爬取里面的内容 不利也seo的 （关键词（关键名词） 权重（网页排行推荐 （站长之家））
  • visbility：hidden 是将内容隐藏起来（相对于将透明度设置为0 还是存在于页面上）
  • visbility：hidden 只会触发重绘 不会触发回流
  • display：none 会触发回流 也会重绘
  • visbility：hidden 具备继承性（父元素设置了 子元素也会设置 你可以更改子元素的visbility 属性 将子元素进行显示）
  • display：none 不具备继承性（父元素设置了display：none 子元素不会继承 子元素更改display属性 也不会显示）

重绘完获取的元素和之前获取的元素不是一个元素

三大家族

- offset 家族

  • （offsetParent 。offsetWidth. offsetHEIght ....）

- client 家族

  • （clientWidth .clientLeft....）

- scrill家族

  • (SscrollTop.scrollWidth....）

计算机网络

- 计算机相关学科

  • 数据结构 （算法.存储结构）
算法 （固定套路）
  • 递归
  • 贪心算法（马拉车算法...）
  • 回溯算法
  • 排序算法
  • DFS（深度优先搜索） BFS（广度优先搜索）
  • 动态规划
  • ...
逻辑结构和储存结结构

数组 链表（头节点 单向链表,双向链表.循环链表） 队列（FIFO（先进先出）） 栈（先进后出） 树（红黑树 二叉树）(mysql的底层的索引储存结果就是树） 图 散列表(hash) 广义表 ....

- 计算机组成原理

冯诺依曼原理

- 计算机网络

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

- 操作系统

相关系统原理 及系统了解 windows（dos命令行）

image.png

image.png linux（linux指令）

image.png

计算机网络相关知识

image.png

image.png

image.png

通信方式
  • 电话（直通的）
  • 分组（将数据报包（data packect ）进行分组 报文头（header）报文（主要数据））
网络（osi）七层模型
  • 物理层
  • 数据链路层
  • 网络层
  • 传输层
  • 会话层
  • 表示层
  • 应用层

image.png

tcp协议/IP协议

image.png

TCP和UDP的区别

TCP面向连接的，数据的发送必须要建立连接，通过连接的渠道发送对应的字节流数据 UDP无连接的。数据发送不需要建立连接 通过对应的数据报包 的形式进行数据的发送

image.png

  • TCP安全 ，可靠、面向连接。但是传输速度慢 。UDP不安全，不可靠，面向非连接，但是传输速度快
TCP的三次握手和四次挥手

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

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

image.png

image.png image.png

应用层相关协议
  • Telenet 通讯传输协议
  • FTP 文件传输协议
  • HTTP 超文本传输协议
  • SNMO 邮件传输协议
  • TFTP 简单文件传输协议
  • NFS 网络文件协议
HTTP和HTTPS
  • HTTP 使用明文传输 （不安全）端口80
  • HTTPS 使用秘文传输 （安全）端口443

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

COOKIE

概述 cookie 是一个位于浏览器的本地存储（大小一般在4kb左右）

解决http的无状态问题

两个客户端访问同一个服务器地址 ，一个搜索鞋子一个搜索衣服，这个时候由于http的无状态问题，服务器不能准备区分对应的客户端，会导致数据发生错误（搜索鞋子的拿到衣服的数据，搜索衣服拿到鞋子的数据）为解决这个无状态问题，客户端必须携带对应的标识让我服务端进行区分。那么如果标识是客户端随意捏造的那么会导致服务器无法区分，

最好的解决办法是 由服务端产生一个表示分发给对应的客户端，客户端在请求的时候在携带的这个标识（sessionID），为了装备区分那么我的客户端的标识必须存储再我的服务端上，服务器才能准确进行验证，那么就完美解决了http的无状态问题

image.png

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

cookie的获取

  console.log（document.cookie）

cookie的显示格式

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

键值对

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

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

时间过期了是不会添加的

image.png

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

image.png

path 指定携带路径

image.png

secure 是否采用https

image.png

cookie的特点

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

给cookie的封装

给document.cookie进行赋值 key给添加新的cookie,如果这个cookie的name存在name就是修改

获取cookie的方法

删除cookie的方法

image.png

第三方cookie.js的使用

image.png cdn地址：cdn.jsdelivr.net/npm/js-cook…

本地存储

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

相关方法

  • setltem 设置数据进入 （可以添加可以修改）
  • getlem 获取数据 （返回数据）
  • removeltem 删除数据
共同点
  • 储存的数据都是字符串
  • 他们都是位于浏览器 的本地储存 （可以窜改和伪造）

localstorage 和cookie区别

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

tooken储存

  • 令牌用于登录验证的（JWT (josn web tooken)）
  • 流程
  • 输入用户名密码点击登录
  • 发生用户名及密码给服务器
  • 服务器验证用户名密码 成功返回tooken -浏览器获取服务器返回的tooken储存起来 （本地存储 localstorage） -下次访问服务器 就需要取里面的tooken带上（放在请求头）

JSON格式

json 是一种数据交互格式 ，一般用于数据传输（跨语言跨平台） JSON格式ed显示模式

对象显示

image.png

数组显示

image.png

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

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

相关转换方法

字符串转js对象json.parse

image.png

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

image.png

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

image.png

avatar
文章
阅读
粉丝