简单易学的Cookie教程（超级通俗）http是一种无状态的传输协议，即服务端无法识别客户端。为了解决这一弊端cooki

「这是我参与2022首次更文挑战的第10天，活动详情查看：2022首次更文挑战」。

嗨，大家好，我是Starqin。今天是农历2022年正月初二，前端小白在这里给您拜年。

什么是cookie，它有什么用

计算机人都知道，http是一种无状态的传输协议，即服务端无法识别客户端，为了解决这一弊端cookie应运而生。

cookie的作用说直白一点就是让浏览器记住我是谁。例如我们在浏览器登录某平台后的一段时间内只要不是主动退出登录状态，那么我只需要登录一次，浏览器就会记得我。

另外我觉得cookie与js BOM中的localStorage、sessionStorage及其相似，都是用来存储数据的。

cookie的数据形式

cookie的数据形式是一窜键值对字符串，例如：name=starqin; age=22

注意age前面的空格也是cookie数据的形式，并非我大意打上去的。

浏览器查看cookie

1、快捷方式图片.png 2、浏览器控制台

图片.png

设置cookie

document.cookie = 'name=Starin';

设置cookie,是将一串键值对字符串赋值给cookie；上面代码中name是键，Starqin是值，键值之间用‘=‘连接。例如有以下代码：

<!DOCTYPE html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        document.cookie = 'name=Starqin';
    </script>
</body>
</html>

查看设置cookie是否成功

图片.png

这样设置的的cookie有一个特性，那就是一但我们关闭当前会话，那么这个cookie就会销毁，类似sessionStorage的特性，之所以说是类似那是因为cookie与sessionStorage不同之处就在于cookie是一种有时效性的数据存储方式。

设置cookie的时效性

未设置时的时效性

图片.png

设置时效性的关键字：Max-Age 下面我们给cookie设置一天的时效性

    <script>
        //一天等于86400秒
        document.cookie = 'name=Starqin;Max-Age=86400';
    </script>

注意：js的时间单位时毫秒，但是Max-Age的时间单位是秒，因此在设置时需要格外注意哦

设置时效性后的cookie 图片.png

设置cookie需要注意的问题

如果有多个cookie需要设置，那么需要使用多个document.cookie分别进行设置
设置cookie时效性是Max-Age的时间单位是秒

获取cookie

document.cookie 是的，就是这么一句简单的语句。

返回的是一串cookie字符串

例如我在刚才设置cookie的页面中写入console.log(document.cookie);

图片.png

这是只有一个cookie的情况，那么如果有多个cookie呢？代码如下

<script>

        document.cookie = 'name=Starqin;Max-Age=86400';

        document.cookie = 'age=20;Max-Age=86400';

        console.log(document.cookie);

    </script>

图片.png

那么请问我怎么只获取cookie中的name?

封装获取cookie的函数

function getCookie() {
    //获取页面的cookie
    let cookie = document.cookie;
    //判断cookie字符串中是否含有’;’号，如果有，就说明不只存在一个cookie值
    if (cookie.includes(';')) {
        //先将cookie字符串按照‘;’切割成数组
        let arr = cookie.split(';');
        //创建一个空对象
        let obj = new Object();
        //遍历切割好的数组
        arr.forEach(function(v) {
            //创建一个新的空数组
            let newArr = [];
            /*割好后的arr的每一个元素格式都是：key=value,那么我们就再一次将这个
            字符串按照‘=’切割成新的数组，存入新数组中*/
            newArr = v.split('=');
            //将最终切割好的数组第一个值当作obj对象的键名，第二个值当作obj的值，存入obj对象中
            obj[newArr[0].trim()] = newArr[1];
        })
        //返回obj对象
        return obj;
    } else {
        //如果cookie字符串中没有‘;’说明，只有一个cookie值，那就可以直接按照‘=’切割成数组
        let newArr = cookie.split('=');
        //创建一个空对象
        let obj = new Object();
        //将最终切割好的数组第一个值当作obj对象的键名，第二个值当作obj的值，存入obj对象中
        obj[newArr[0]] = newArr[1];
        //返回obj对象
        return obj;
    }
}

用上面的函数获取页面中的cookie

图片.png 这样一来我们就可获取指定的cookie啦！