C/C++教程

Cookie

本文主要是介绍Cookie,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

一、前端和后端

  • 前端是展示内容的部分

  • 后端是提供数据支持的部分

1、网络构成图

网络构成分为七层 最底层的物理层 数据链路层(底层维护 需要硬件支持),网络层(基于网络协议白皮书书写网络协议),传输层(网络传输的支持 tcp(直连)和udp(丢包)) 应用层相关协议(对应应用支持的协议 http网络传输协议 ftp文件传输协议 SNMP邮件传输协议)

2、http和https

http,https 都是网络传输协议 是用于网络相关传输,http走的是明文传输,https走的密文传输(内部采用对称加密以及非对称加密)。对应的https安全性要高于http。https为什么会采用加密,因为他底层采用了openSSL。(open表示开源)

3、http的特性

  • 无状态 (服务器不知道是谁访问的我)
  • 无连接 (不会建立完整的连接 访问一过去 数据一返回连接就断了)
  • 长连接 (连接可以建立长时间)
  • 短连接(连接对应的内容很短)

4、问题

由于http是无状态的!那么对应的我们在实现某些功能的时候就会出现对应的问题.比如a用户登录了 b用户也登录了,a用户可能拿到b用户的页面,b用户可以拿到a用户的页面。这个时候我们就出现问题了。

5、问题的解决

根据上面的问题我们可以得出对应的a可能会拿到b的内容,原因是因为对应的服务器无法区分a和b,如果我在a的访问的时候给一个唯一的标识,在b的访问的时候给一个唯一的标识,那么我是否可以区分a和b。所以对应的解决方案就是a和b拥有不一样的标识,而这个标识是在建立连接的时候这个标识叫做sessionId。也就意味这个每个请求去建立连接都会获得一sessionId。(sessionID服务端给的)。如果对应的sessionID是存储于服务端的话,那么服务端就会越来越大从影响对应的效率,所以我们诞生了一个内容来保存这个值到对应浏览器端,这个东西就是cookie。所cookie的诞生就是为了保存sessionID,从而解决http无状态的问题。

二、cookie

1、概述:

cookie 也叫 HTTPCookie,是客户端与服务器端进行会话(session)使用的一个能够在浏览器本地化存储的技术。 

  • cookie存在于浏览器端
  • cookie为了保存sessionID出现的
  • cookie的出现解决了http无状态的问题

2、特性

  • cookie是不安全的
  • cookie是可以被篡改和伪造的
  • cookie他是以字符串存储的(单一),有很多的数据类型是不支持的(二进制图片,二进制的视频,base64码的视频等等)
  • cookie他的大小不能超过4kb(大小只有4kb 容量小)
  • cookie会随请求发送
  • cookie可以跨域(domain来设置)

3、cookie的完整格式为:    

name=value;[expires=date];[path=路径];[domain=域名];[secure] 

  • 其中中括号[]表示该值是可选。 
  • name=value: 为你要保存的键值对(必选) 
  • expires=date: 表示cookie的失效时间, 默认是浏览器关闭时失效(可选) path=路径: 访问路径, 默认为当前文件所在目录(可选)
  • domain=域名: 访问域名, 限制在该域名下访问(可选)
  • secure: 安全设置, 如果设置了则必须使用https协议才可获取cookie(可选)

(1)访问

//document.cookie
console.log(document.cookie)

(2)name随便定value随便定(存的key和value)

document.cookie = 'username=jack'

(3)expires 过期时间设置 (如果没有设置 跟sessionID的过期时间一致 连接一断就没有了)

var date = new Date(2022,7,9,16,20)
document.cookie = 'username=jack;expires='+date

(4)path 只有是这个路径以下的url才携带这个cookie

document.cookie = 'username=jack;expires='+date+';path=http://www.baidu.com'

(5)domain 跨域设置在这个域名下实现了跨域的功能

document.cookie ='username=jack;expires='+date+';path=http://www.baidu.com;domain=www.baidu.com'

(6) secure 安全 只有当前访问协议是https的时候才会携带

document.cookie ='username=jack;expires='+date+';path=http://www.baidu.com;domain=www.baidu.com;secure'

4、cookie的相关操作(增删改查的功能)

(1)cookie的封装

//主要是封装的cookie的增删改查的方法
//根据key来获取cookie里面的元素
// password=123456; username=123456
function getItem(key){
var str = document.cookie
//对于这个字符串进行切割
var splitArr = str.split(';') //[password=123456,username=123456]
var cookieObject = {}
//遍历这个数组
for(var splitStr of splitArr){//password=123456
var keyValueArr = splitStr.split('=')
cookieObject[keyValueArr[0].trim()] = decodeURIComponent(keyValueArr[1])
}
return cookieObject[key]
}
//设置cookie及里面的元素
function setItem(key,value,expires,path,domain,secure){
//如果没有key获取没有value 直接报错
if(!key || (!value && value!='')){
//抛出错误 后面的代码将不会执行
throw new Error('参数错误')
}
document.cookie = `${key}=${encodeURIComponent(value)}`
if(expires){//如果有过期时间拼接
document.cookie += `;expires=${expires}`
}
if(path){//如果有路径拼接
document.cookie += `;path=${path}`
}
if(domain){//如果有domain拼接
document.cookie += `;domain=${domain}`
}
if(secure){//如果有secure拼接
document.cookie += `;${secure}`
}
}
//根据key来删除对应的cookie
function removeItem(key){
if(getItem(key) || getItem(key)==''){
setItem(key,'',new Date())
}else{
console.error('当前的key值不存在')
}
}

(2)cookie.js(第三方的js)

Cookies.remove('username')
Cookies.get('username')
Cookies.set('username','jack',{expires:10}) //设置一个username 10天以后过期

(3)encodeURIComponent 转码

console.log(encodeURIComponent('{abdejde152}'));

(4)decodeURIComponent 解码

var str = encodeURIComponent('{abdejde152}') //进行编码
console.log(decodeURIComponent(str));//解码

三、cookie练习

1, 十天内免登录:     如下图, 有账户,密码输入框, 当用户点击确定按钮, 如果选择了十天内免登录, 则将账户和密码保存在cookie中.     当下一次再进入该页面时, 自动填写上次保存的账户和密码  

<body>
    用户名:<input type="text"><br>
    密码:<input type="password"><br>
    <input type="checkbox">10天免登陆<br>
    <input type="submit">
    <script src="./cookie.min.js"></script>
<script>
    // 1, 十天内免登录:
    // 如下图, 有账户,密码输入框, 当用户点击确定按钮, 如果选择了十天内免登录, 则将账户和密码保存在cookie中.
    // 当下一次再进入该页面时, 自动填写上次保存的账户和密码 
    // 获取所有的input框
    var inputs = document.querySelectorAll('input')
    // 下一次进入页面的值要自动填写
    inputs[0] = Cookies.get('username')?Cookies.get('username'):''
    inputs[1] = Cookies.get('password')?Cookies.get('password'):''
    // 给submit添加事件
    inputs[3].onclick = function(){
        // 获取对应的输入的内容
        var username = inputs[0].value
        var password = inputs[1].value

        // 还要获取checkbox是否被选中
        var isCheck = inputs[2].checked
        if(isCheck){
            Cookies.set('username',username,{expires:10})
            Cookies.set('password',password,{expires:10})
        }
        location.reload()
    }
</script>
</body>

 

这篇关于Cookie的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!