JavaScript基础--Cookie

含义：cookie是一个以字符串的形式存储数据的位置，也可以理解为存储数据的一个区域或空间。

存储形式： cookie以字符串形式存储，在字符串中以key=value的形式出现，一个key=value是—条数据，多个数据之间以；分割。

特点

• 存储大小有限制，一般是4kb左右
• 存储数量有限制，一般是50条左右
• 有时效性，一般是会话级别
• 有域名限制，谁设置的谁才能读取

 使用方式

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

        设置—个时效性为会话级别的cookie

        document.cookie = 'a=100'

        设置—个有过期时间的cookie

        document.cookie = 'b=200 ; expires=Thu，18 Dec 2043 12:00:00 GMT" ; '

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

        const cookie = document.cookie

        console.log(cookie)

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

        因为cookie 不能直接删除

        所以我们只能把某一条cookie 的过期时间设置成当前时间之前

        那么浏览器就会自动删除cookie

        document.cookie = 'b=200 ;expires=Thu，18 Dec 2000 12:00:00 GMT" ; '

Cookie操作封装

•  setCookie 用于设置 cookie

function setCookie(key, value, expires) {
    const time = new Date()
    time.setTime(time.getTime() - 1000 * 60 * 60 * 8 + expires) // 用于设置过期时间
    document.cookie = `${key}=${value};expires=${time};`
}

•  getCookie 获取 cookie 中的某一个属性

function getCookie(key) {
    const cookieArr = document.cookie.split(';') 
    //[a=100, b=200, c=300]
    let value = ''
    cookieArr.forEach(item => { 
        if (item.split('=')[0].trim() === key) {
            value = item.split('=')[1]
        }
    })
    return value
}

•  delCookie 删除 cookie 中的某一个属性

function delCookie(name) {
    setCookie(name, 1, -1)
}

 cookie与http协议的关系

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