当前位置: article > 正文

JS创建、获取、删除 cookie 方法_js 删除cookie

作者：小蓝xlanll | 2024-02-27 03:25:23

踩

js 删除cookie

js 创建 cookie 方法

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

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

js 获取 cookie 方法

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

js 删除 cookie 方法

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

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

代码示例

<!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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

分别点击 “设置cookie”、“获取cookie”、“删除cookie” 按钮，控制台打印结果如下：

在这里插入图片描述
可以看到浏览器 cookie 中有了设置的 cookie值：

在这里插入图片描述
2分钟后刷新浏览器，可以看到 “testCookie2” 不存在了，因为设置的 2分钟过期时间到了，删除掉了，“testCookie” 还在，关掉浏览器后，“testCookie” 就不在了：

在这里插入图片描述
“testCookie2” 过期之前关闭浏览器，再打开浏览器查看该页面，“testCookie2” 还在，但是 “testCookie” 不在了：

在这里插入图片描述

如果设置 cookie值为 null，不会将 cookie 删除，设置 cookie值为 ‘’ 空字符串也不会删除，只是值为空：

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小蓝xlanll/article/detail/149659