js实现一二级域名共享cookie

前言

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

打开 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 相关配置

属性	介绍
name	Cookie 的名称，Cookie 一旦创建，名称便不可更改
value	Cookie 的值，如果值为 Unicode 字符，需要为字符编码。如果为二进制数据，则需要使用 BASE64 编码
maxAge	Cookie 失效的时间，单位秒。如果为整数，则该 Cookie 在 maxAge 秒后失效。如果为负数，该 Cookie 为临时 Cookie，关闭浏览器即失效，浏览器也不会以任何形式保存该 Cookie。如果为 0，表示删除该 Cookie。默认为-1。
secure	该 Cookie 是否仅被使用安全协议传输。安全协议。安全协议有 HTTPS，SSL 等，在网络上传输数据之前先将数据加密。默认为 false。
path	Cookie 的使用路径。如果设置为“/sessionWeb/”，则只有 contextPath 为“/sessionWeb”的程序可以访问该 Cookie。如果设置为“/”，则本域名下 contextPath 都可以访问该 Cookie。注意最后一个字符必须为“/”。
domain	可以访问该 Cookie 的域名。如果设置为“.google.com”，则所有以“google.com”结尾的域名都可以访问该 Cookie。注意第一个字符必须为“.”。
comment	该 Cookie 的用处说明，浏览器显示 Cookie 信息的时候显示该说明。
version	Cookie 使用的版本号。0 表示遵循 Netscape 的 Cookie 规范，1 表示遵循 W3C 的 RFC 2109 规范

通过上方 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>