cookie/ cookie的概念/ cookie的特点/ cookie的存储形式 / cookie 的封装

cookie

Cookie：由于服务器无法确认用户信息，w3c提出，给每一个用户都颁发一个通行证，无论谁访问的时候都要携带该通行证，这样服务器就可以从通行证上确认用户的信息。通行证就是cookie

cookie的概念

客户端会话技术，将数据保存在客户端

• cookie 是一个以字符串的形式存储数据的位置
• 每一个 HTTP 请求都会在请求头中携带 cookie 到服务端
• 每一个 HTTP 响应都会在响应头中携带 cookie 到客户端
• 也就是说，cookie 是不需要我们手动设置，就会自动在 客户端 和 服务端之间游走的数据
• 我们只是需要设置一下 cookie 的内容就可以

cookie的存储形式

1、cookie 是以字符串的形式存储，在字符串中以 key=value 的形式出现
2、每一个 key=value 是一条数据
3、多个数据之间以 ; 分割

// cookie 的形态
'a=100; b=200; c=300;'

cookie的特点

• cookie是与浏览器相关的，不同的浏览器所保存的cookie也是 不能相互访问的
• cookie可能会被用户删除
• cookie的安全性不够高，如果想要保存用户名和密码，必须进行加密处理
• cookie’存储的数据量在4k左右，cookie支持字符串形式的数据
• cookie信息存储在硬盘上，因此可以作为全局变量
• 数量有限制，一般是 50 条左右
• 有域名限制，也就是说谁设置的谁才能读取
• 有时效性，也就是有过期时间，一般是 会话级别（也就是浏览器关闭就过期了）

前端操作cookie的api

1. 读取 cookie 的内容使用 document.cookie

let cookie = document.cookie
console.log(cookie) // 就能得到当前 cookie 的值

2. 设置 cookie 的内容使用 document.cookie

// 设置一个时效性为会话级别的 cookie
document.cookie = ‘a=100’

// 设置一个有过期时间的 cookie
document.cookie = ‘key=value;expires=时间对象’
// 例如：
document.coolkie = 'age=18;expires = '+new Date()
// 上面这个 cookie 数据 过期后就会自动消失

其他写法：
document.cookie =“键=值;expires=失效时间点;path=允许访问该cookie的文件的路径;domain=允许方式该cookie的域名”

3. 删除 cookie 的内容使用 document.cookie

// 因为 cookie 不能直接删除
// 所以我们只能把某一条 cookie 的过期时间设置成当前时间之前
// 那么浏览器就会自动删除 cookie

或者将键对应的值设置为 ’ ’ 空字符串

删除 cookie 的万能写法

document.cookie = "name='';expires=-1"

封装cookie

• 设置cookie

// 封装一个setCookie的函数  键 /  值  /  时间(过期时间)
function setCookie(key,value,day){
     //   document.cookie = `key=value;expires=日期对象`
     let d = new Date();
     d.setDate(d.getDate()+day);
     document.cookie = `${key}=${value};expires=${d}`;
 }

• 获取cookie

// 封装一个getCookie()   获取cookie的函数
function getCookie(value){
    let cookie = document.cookie;// username=zhangsan; sex=男; age=18
    let arr = cookie.split('; ');// ['username=zhangsan','sex=男','age=18']
    for (let i in arr) {//item  'username=zhangsan'    'sex=男'    'age=18'
        let newarr = arr[i].split('=');//第一项 ["username",'zhangsan']      第二项 ...  ['sex','男']
        if (newarr[0] == value) {
            return newarr[1]; //如果存在value， 说明 newarr[1]就是想要的结果  return 终止函数的执行
        }
    }
    //如果没有cookie，或者有cookie，但是没有找到key，得不到cookie，返回一个字符串
    return '';
}

• 删除cookie

function delCookie(key){
    setCookie(key," ",-1);
}