JavaScript Cookie

一、Cookie的使用

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

1、创建cookie

        // 创建cookie
        document.cookie="username=sleepwalker";

        // 创建cookie, 并设置过期时间
        // 默认情况下，cookie 在浏览器关闭时删除，可以使用 expires 参数设置过期时间
        var d = new Date();
        d.setTime(d.getTime() + 60 * 1000);
        document.cookie="password=123; expires=" + d.toGMTString();

        // 默认情况下，cookie 属于当前页面, 也可以使用 path 参数告诉浏览器 cookie 的路径
        document.cookie="pass=123; expires=" + d.toGMTString()+ "; path=/";

在JS中，修改 cookie 类似于创建同名的 cookie，将旧的 cookie 覆盖。

2、读取cookie

        // 读取cookie：document.cookie
        // document.cookie 将以字符串的方式返回所有的 cookie，
        // 类型格式： cookie1=value; cookie2=value; cookie3=value;
        console.log(document.cookie);

        // 获取cookie中 "password" 的值
        if (document.cookie.length>0) {
            var name = "password=";
            // split() 方法用于把一个字符串分割成字符串数组。
            var ca = document.cookie.split(';');
            for(var i=0; i<ca.length; i++) {
                // trim() 方法用于去除字符串两端的空白字符
                var c = ca[i].trim();
                // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
                // 如果要检索的字符串值没有出现，则该方法返回 -1。
                if (c.indexOf(name)==0) {
                    // substring() 方法用于提取字符串中介于两个指定下标之间的字符。
                    var cookieItem = c.substring(name.length,c.length);
                    // cookieItem 即为cookie中 "password" 的值
                    console.log(cookieItem);
                    break;
                }
            }
        }

3、删除 cookie

        // 删除 cookie ：只需设置 expires 参数为以前的时间即可，不必指定 cookie 的值
        document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
        document.cookie = "password=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
        document.cookie = "pass=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";

二、代码封装

1、创建cookie

    // 创建并存储cookie
    function setCookie (cname, cvalue, expiredays) {
        var exdate = new Date();
        exdate.setTime(exdate.getTime() + expiredays);
        var cookieItem = cname + "=" + cvalue + ( expiredays ? "; expires=" + exdate.toGMTString() : "" );
        document.cookie = cookieItem;
    }

2、读取cookie

    // 获取cookie
    function getCookie (cname) {
        if (document.cookie.length>0) {
            var name = cname + "=";
            // split() 方法用于把一个字符串分割成字符串数组。
            var ca = document.cookie.split(';');
            for (var i=0; i<ca.length; i++) {
                // trim() 方法用于去除字符串两端的空白字符
                var c = ca[i].trim();
                // indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
                // 如果要检索的字符串值没有出现，则该方法返回 -1。
                if (c.indexOf(name)==0) {
                    // substring() 方法用于提取字符串中介于两个指定下标之间的字符。
                    var cookieItem = c.substring(name.length, c.length);
                    return cookieItem;
                }
            }
        }
        return ""
    }

3、删除 cookie

    // 删除cookie
    function deleteCookie (cname) {
        document.cookie = cname + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    }

4、使用

        // 创建cookie
        setCookie('username', 'sleepwalker');
        setCookie('password', '123', 60 * 1000);
        // 读取cookie
        var username = getCookie('username');
        var password = getCookie('password');
        console.log(username);
        console.log(password);
        // 删除 cookie
        deleteCookie('username');
        deleteCookie('password');

Tips:

用js本地操作cookie时，在谷歌浏览器chrome中不生效，是因为chrome不支持js在本地操作cookie。当然，部署到服务器上所有浏览器都是支持操作cookie的。