前言

最近接手的项目中 ，有人反馈了一个问题，说是在访问网站并登录后，登录成功有登录信息，但是刷新页面后重定向到了登录页面，让从新登录。

打开 goole 调试页面，查看 cookie 时发现存储的相关 token 信息不见了。

原本以为 cookie 有效期有问题，但经过排查 cookie 失效为 7 天，也没有清除 cookie 的逻辑。

经排查发现：我们在输入访问 hew.cn 的时候，刷新页面网址变成了www.hew.cn 导致原本存储在 hew.cn 域名下的 cookie 信息没有同步到www.hew.cn下。

也就是所谓的：二级域名和顶级域名不共享的原因而引起的 cookie

原理

我们往往在开发过程中在存储 cookies 时，不会特意去加上 domain 属性，这样会默认存放在当前域名下。因此我们在访问www.hew.cn页面只会携带上，存放在当前域名下的token信息，而我们通过浏览器输入www.hew.cn其实访问的顶级域名是hew.cn，二者是父子级其实是关系。

我们这样存储 cookie 会二级子域名下的 cookie 和顶级域名不共享的。同理 a.hew.com 下设置 cookie， 在 b.hew.com 下也是无法正常使用的

要避免这样的原因，我们就需要设置 cookie 的 domain

cookie 相关配置

通过上方 cookie 相关配置我们可以看到domain 属性 可以有效进行一二级域名共享 cookie

代码实现

<script>
    document.cookie="name=value;domain=hew.cn";
</script>

简单封装一个获取、设置、删除 cookie 的工具类 CookieTool

/**
         * @params name  cookie键
         * @params value cookie值
         * @params days  cookie过期时间
         */
        export function setCookie(name, value, days) {
            var domain, domainParts, date, expires, host;
            // 设置过期时间 格林威治时间 (GMT)
            if (days) {
                date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                expires = "; expires=" + date.toGMTString();
            } else {
                expires = "";
            }
            // 获取域名
            host = location.host;
            if (host.split('.').length === 1) {
                document.cookie = name + "=" + value + expires + "; path=/; domain=." + host;
            } else {
                domainParts = host.split('.');
                domainParts.shift();
                domain = '.' + domainParts.join('.');
                document.cookie = name + "=" + value + expires + "; path=/; domain=" + domain;
                if (getCookie(name) == null || getCookie(name) != value) {
                    domain = '.' + host;
                    document.cookie = name + "=" + value + expires + "; path=/; domain=" + domain;
                }
            }
        }
        export function getCookie(name) {
            var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)")
            if (arr = document.cookie.match(reg))
                return unescape(arr[2])
            else
                return null
        }
        export function delCookie(name) {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval = getCookie(name);
            if (cval != null)
                document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
        }
    </script>