JS创建、获取、删除 cookie 方法_js 删除cookie-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39111074/article/details/127492680

js 创建 cookie 方法

// 没有设置 cookie 过期时间的话，默认是 会话cookie(浏览器关闭时，该cookie失效，被删除)
document.cookie = cname + "=" + value;
// 设置了过期时间的话，在设置的时间段内 cookie 一直存在有效，到达过期时间点时，cookie被删除而失效
document.cookie = cname + "=" + value + ";expires=" + expiresTime;

还可以设置 cookie 的 “path”，不设置的话，默认是 “path=/”，更多信息请上网查询

js 获取 cookie 方法

document.cookie;   // 会获取所有 cookie 值，以 ‘;’ 分隔，具体 cookie值 需要 再进行一下处理来获取

js 删除 cookie 方法

不用设置 cookie 值，将过期时间设置为过去时间即可

document.cookie = cname + "=;expires=" + 过去时间;
// 例如：
var edate = new Date();
document.cookie = "testCookie=;expires=" + (edate.getTime() - 1).toUTCString();

代码示例

<!DOCTYPE html>
<html lang="en">

<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>cookie</title>
</head>

<body>
    <button id="setCookie" class="setCookie">点击设置cookie</button>
    <button id="getCookie" class="getCookie">点击获取cookie</button>
    <button id="removeCookie" class="removeCookie">点击删除cookie</button>
    <script>
        window.onload = function () {
            // 设置cookie
            var btn1 = document.getElementById('setCookie');
            var btn2 = document.getElementById('getCookie');
            var btn3 = document.getElementById('removeCookie');

            // 设置 cookie
            btn1.onclick = function () {
                setCookie('testCookie', '111');
                setCookie('testCookie2', '222', 120);
            }

            // 获取 cookie
            btn2.onclick = function () {
                var c1 = getCookie('testCookie');
                var c2 = getCookie('testCookie2');
                console.log(c1, c2);
            }

            // 删除 cookie
            btn3.onclick = function () {
                setCookie('testCookie', null); // 这种不能删除 cookie，只是将 cookie值设置成了null，获取cookie会得到一个 'null' 的 字符串值
                setCookie('testCookie', ''); // 这种是将 cookie 值设置成 空，没有删除 cookie
                setCookie('testCookie2', '', -1);  // 这种 会将 cookie 在浏览器中删除，设置超时时间为过去时间
            }


            function setCookie(cname, value, seconds) {
                var edate = new Date();
                edate.setTime(edate.getTime() + (seconds * 1000));
                var cData = cname + "=" + value;
                cData += (seconds == null) ? '' : (';expires=' + edate.toUTCString());
                // console.log(cData);  可以F12控制台查看 cookie值

                document.cookie = cData;
            }

            function getCookie(cname) {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i].trim();
                    if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
                }
                return "";
            }
        }
    </script>
</body>

</html>