JS面向对象的Cookie操作

JS面向对象的Cookie操作

---

一、Cookie是什么

cookie 是存储于访问者的计算机中的变量。

每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。

可以使用 JavaScript 来创建和取回 cookie 的值。

二、Cookie操作

1、创建cookie

document.cookie="name=小明";

添加过期时间（以 UTC 或 GMT 时间）

document.cookie="name=小明; expires=Thu, 18 Dec 2013 12:00:00 GMT";

2、读取cookie

var cookie = document.cookie;

注意：document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

3、删除cookie

删除 cookie 非常简单。只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

三、封装Cookie

1、定义一个匿名函数

(function () {})(window);

2、定义Cookie构造函数

    function Cookie() {
    }

3、定义Cookie添加函数

    /**
     * 设置cookie
     * @param key
     * @param value
     * @param exdays
     */
    Cookie.prototype.set = function (key, value, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toUTCString();
        document.cookie = key + "=" + value + "; " + expires;
    }

4、定义获取所有Key的函数

    /**
     * 获取所有cookie名
     * @returns {Array}
     */
    Cookie.prototype.keys = function () {
        var cookie = document.cookie;
        var cookies = cookie.split(';');
        var keys = [];
        cookies.forEach(function (c, index) {
            var tmp = c.split('=');
            keys[index] = tmp[0].trim();
        })
        return keys;
    }

5、定义Cookie删除函数

    /**
     * 清除cookie
     * @param key
     */
    Cookie.prototype.clear = function (key) {
        /**
         * 清除指定的cookie
         */
        if (key)
            this.set(key, "", -1);
        else {
            /**
             * 清除所有cookie
             */
            var keys = this.keys();
            var _this = this;
            keys.forEach(function (item, index) {
                _this.set(item, "", -1);
            })
        }

    }

6、定义Cookie获取函数

    /**
     * 获取指定的cookie
     * @param key
     * @returns {undefined}
     */
    Cookie.prototype.get = function (key) {
        var cookie = document.cookie;
        var cookies = cookie.split(';');
        var value = undefined;
        cookies.forEach(function (c, index) {
            var tmp = c.split('=');
            if (tmp[0] && tmp[0].trim() === key) {
                if (tmp.length <= 1) {
                    return null;
                }
                value = tmp[1];
            }
        })
        return value;
    }

7、把定义的Cookie对象挂载到window上

    /**
     * 挂载Cookie
     * @type {Cookie}
     */
    window.Cookie = Cookie;

四、完整代码

(function () {

    function Cookie() {
    }

    /**
     * 获取指定的cookie
     * @param key
     * @returns {undefined}
     */
    Cookie.prototype.get = function (key) {
        this.clear();
        var cookie = document.cookie;
        var cookies = cookie.split(';');
        var value = undefined;
        cookies.forEach(function (c, index) {
            var tmp = c.split('=');
            if (tmp[0] && tmp[0].trim() === key) {
                if (tmp.length <= 1) {
                    return null;
                }
                value = tmp[1];
            }
        })
        return value;
    }

    /**
     * 设置cookie
     * @param key
     * @param value
     * @param exdays
     */
    Cookie.prototype.set = function (key, value, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = 'expires=' + d.toUTCString();
        document.cookie = key + '=' + value + '; ' + expires;
    }

    /**
     * 清除cookie
     * @param key
     */
    Cookie.prototype.clear = function (key) {
        /**
         * 清除指定的cookie
         */
        if (key)
            this.set(key, '', -1);
        else {
            /**
             * 清除所有cookie
             */
            var keys = this.keys();
            var _this = this;
            keys.forEach(function (item, index) {
                _this.set(item, '', -1);
            })
        }

    }

    /**
     * 获取所有cookie名
     * @returns {Array}
     */
    Cookie.prototype.keys = function () {
        var cookie = document.cookie;
        var cookies = cookie.split(';');
        var keys = [];
        cookies.forEach(function (c, index) {
            var tmp = c.split('=');
            keys[index] = tmp[0].trim();
        })
        return keys;
    }

    /**
     * 挂载Cookie
     * @type {Cookie}
     */
    window.Cookie = Cookie;


})(window);

五、调用示例

1、创建Cookie对象

var cookie = new Cookie();

2、添加Cookie

cookie.set('name', '小明', 1);

3、获取Cookie

cookie.get('name')