JS面向对象的Cookie操作

Bertha 。 2022-05-26 03:35 188阅读 0赞

# 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')