cookie的基本使用

cookie的基本使用

1.基本概念
// cookie是英文 曲奇、小甜饼的意思
// HTTP协议是一个无状态的协议 状态指的是连接会不会持久保持
// cookie是HTTP协议的一部分 HTTP协议对cookie有规定
// cookie是浏览器端的存储方式 同时也是一个请求头字段
// cookie由服务器设置 由前端存储 (通过JS脚本也可以进行cookie的操作)
// 登录流程：
// 前端填写好表单之后，通过表单或者AJAX发送请求，发给登录接口。登录接口处理完毕，成功！ 此时会在响应头中添加一个字段 set-cookie: xxxx=xxxx. 这个响应头会随着响应请求回到浏览器。浏览器在处理这次请求的时候发现有这个字段 于是 把这个信息存储起来(以文件的形式存储) 当下一次浏览器发送请求的时候 相应的cookie 会随着请求再次发送到服务器上。

JS获取cookie的方式 document.cookie
设置方式 document.cookie = “key=value”; 一次设置 只能设置一个值

2.封装的操作方法

  // 封装cookie的操作方法
        function getCookie(name) {
            // 获取cookie
            var str = document.cookie;
            // 把cookie以 "; " 进行分隔
            var arr = str.split("; ");
            // 循环数组
            for (var i = 0; i < arr.length; i++) {
                // 以等号分隔
                var key = arr[i].split("=")[0];
                var value = arr[i].split("=")[1];
                if (key === name) {
                    return value;
                }
            }
        }

        function setCookie(name, value, maxAge = 0, path = "/") {
            document.cookie = name + "=" + value + ";max-age=" + maxAge + ";path=" + path;
        }

        function removeCookie(name, path) {
            document.cookie = name + "=1;max-age=-1;path=" + path;
        }