首页 > 其他分享 >day13 cookie

day13 cookie

时间:2022-10-26 22:23:19浏览次数:58  
标签:value localStorage key day13 var 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相关操作
//获取方法 通过对应的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())
}   

第三方封装的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都是位于浏览器上

标签:value,localStorage,key,day13,var,cookie,对应
From: https://www.cnblogs.com/itlulu/p/16830310.html

相关文章

  • C#解析Cookie字符串为CookieCollection
    C#解析Cookie字符串为CookieCollection publicstaticCookieCollectionGetAllCookiesFromHeader(stringstrHeader,stringstrHost){ArrayListal=......
  • Flask 学习-93.cookie 有效期设置
    前言flask框架设置cookie,如果没有指定过期时间,那么cookie将会在浏览器关闭后过期。set_cookie()方法Flask在响应中添加一个cookie,使用内置的Response类提供的set......
  • 解决新版chrome浏览器SameSite属性cookie拦截问题
    问题现象:由于升级了新版chrome浏览器后,发现系统正常iframe嵌套、AJAX,Image从以前的跨站会发送三方Cookie,变成了不发送。导致某些内容无法显示了,页面空白,但是请求未报错。......
  • Cookie
    1.通信协议通信协议是指双方实体完成通信或服务所必须遵循的规则和约定。可以简单地理解为各计算机之间进行相互会话所使用的共同语言。两台计算机在进行通信时,必须使用......
  • jmeter中获取token和cookie
     ##登录获取token1.添加请求1.1输入接口中需要携带的参数的值   2.正则表达式提取器提取出值   3.输入token数据   "token":"(.+?)"......
  • 怎样将数据存入cookie和取出cookie
    怎么将数据存入cookie和取cookie1.存入//存cookie@RequestMapping("/selectUsers7")publicStringselectUsers7(HttpServletResponseresponse){Cookiecookie=newCoo......
  • 怎么将数据存入cookie和取cookie
    怎么将数据存入cookie和取cookie1.存入//存cookie@RequestMapping("/selectUsers7")publicStringselectUsers7(HttpServletResponseresponse){Cookiecook......
  • SpringMVC(七):利用Cookie实现登陆验证
    一、登陆时要往将用户登陆的信息存入Cookie@RequestMapping("/doLogin")@ResponseBodypublicStringdoLogin(StringuserName,StringuserPassword,HttpSer......
  • 2_cookie、session、token、sign
    一、关于cookie、session、token、sign 借鉴链接:https://juejin.cn/post/7147913027785293855 ......
  • electron升级到20版本后,禁用第三方cookie、跨域问题解决方法
    最近公司的electron项目从13升级到最新的20版本,导致qq登录失效问题,特此记录1.qq扫码登录失效升级后之前的老版本可以扫码登录,但是新版本扫码登录后,页面直接刷新,没有登录......