day13 - cookie

不想上班ing

于 2022-10-17 21:37:19 发布

阅读量244

点赞数 1

文章标签： html5 javascript css3

本文链接：https://blog.csdn.net/m0_71706639/article/details/127377472

版权

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

数据结构 (leetcode)

逻辑结构

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

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

windows 、 linux （指令服务器部署）、 mac
计算机组成原理

冯诺依曼（cpu 内存条硬盘（显卡））
计算机网络

网络的构成及相关的协议

2.计算机网络

概述：

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

关键名词：

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

3.网络协议及其构成

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

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

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

应用层的相关协议

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

4.HTTP和HTTPS

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

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

5.后端和前端

后端是提供对应业务操作（提供数据）
前端是提供对应的页面渲染操作

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

6.HTTP的几大特性

无状态（没有状态）

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

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

解决HTTP的无状态问题

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

7.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);

8.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())
}

9.第三方封装的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 删除方法

10.JSON格式

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

json格式的表示形式

对象 {}

var json = {}

数组 []

var json = []

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

11.歌词数据

{"sgc":false,"sfy":false,"qfy":false,"lrc":{"version":9,"lyric":"[00:00.000] 作词 : 陈思宇/谈晓珍/潘瑛\n[00:00.746] 作曲 : Lee Yong Min/Hwang Se Joon\n[00:01.492]Rap词：MC HAN韩勇\n[00:10.985]RAP：\n[00:11.705]Ya boy MC HAN\n[00:14.454]我弹的钢琴都是为了你弹\n[00:16.577]弹了那么久还是觉得浪漫\n[00:19.434]我弹的时候能听到你在唱\n[00:21.412]感觉上你在这\n[00:22.580]跟我一起说话\n[00:23.964]一天到晚　我不停地想\n[00:26.197]You’re all that I think of\n[00:27.826]You’re all that I want\n[00:28.929]跟你一起总是让我特别开心\n[00:31.190]不论发生什么事我永远爱你\n[00:33.716]如果你突然打了个喷嚏　那一定就是我在想你\n[00:38.058]如果半夜被手机吵醒　啊那是因为我关心\n[00:42.620]常常想你说的话是不是别有用心\n[00:47.463]明明很想相信　却又忍不住怀疑\n[00:52.558]在你的心里　我是否就是唯一　爱就是有我常烦着你\n[01:01.420]Ho Baby　情话多说一点　想我就多看一眼\n[01:07.028]表现多一点点　让我能　真的看见\n[01:11.363]Oh Bye　少说一点　想陪你不止一天\n[01:16.430]多一点　让我　心甘情愿　爱你\n[01:35.835]喜欢在你的臂弯里胡闹　你的世界是一座城堡\n[01:40.409]在大头贴画满心号　贴在手机上对你微笑\n[01:45.169]常常想我说的话你是否听得进去\n[01:50.040]明明很想生气　却又止不住笑意\n[01:54.734]Oh Oh 在我的心里 你真的就是唯一　爱就是有我常赖着你\n[02:03.785]Ho Baby　情话多说一点　想我就多看一眼\n[02:09.130]表现多一点点　让我能　真的看见\n[02:14.255]Oh Bye　少说一点　想陪你不止一天\n[02:18.766]多一点　让我　心甘情愿　爱你\n[02:23.603]就这样　一天多一点　慢慢地累积感觉\n[02:28.811]两人的世界　就能够贴近一点\n[02:37.339]Ho Baby　情话多说一点　想我就多看一眼\n[02:42.969]表现多一点点　让我能　真的看见\n[02:47.728]Oh Bye　少说一点　想陪你不止一天\n[02:52.449]多一点　让我　心甘情愿　爱你\n[02:57.118]Ho Baby　情话多说一点　想我就多看一眼\n[03:02.191]表现多一点点　让我能　真的看见\n[03:06.923]Oh Bye　少说一点　想陪你不止一天\n[03:11.429]多一点　让我　心甘情愿　爱你\n[03:16.584]多一点　才会慢慢发现　因为你　让我心甘情愿\n[03:26.227]（OT：Nae Yae Gil Eo Bwa）\n"},"tlyric":{"version":0,"lyric":""},"code":200}

//获取对应的歌词
console.log(json.lrc.lyric);

12.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')