javascript制作的cookie封装及使用指南


Posted in Javascript onJanuary 02, 2015

一、前言

之前使用cookie,都是document.cookie的形式去操作,兼容性虽好,但是麻烦。个人又是个比较喜欢造轮子的人,所以针对cookie,封装了个工具类。很长时间以来,我都喜欢写代码,而不太喜欢文字总结,也不太喜欢写些零碎的东西,看来得改。

二、思路

(1)如何封装,封装成啥样

如何封装:就是使用原生的js封装成工具,那样到哪里都能能用。针对document.cookie封装是最好的方式,所有的操作都基于document.cookie。

封装成啥样:封装成能够以对象的形式存在,同时可以使用getter & setter方法的实行。

(2)封装哪些方法

get()、set(name, value, opts)、remove(name)、clear()、getCookies()等等,个人觉得封装这么多方法足矣使用cookie了。

三、行动

(1)了解cookie, cookie的实质是HTTP cookie,在客户端表现的对象时document.cookie.更多了解,可以看我下面的代码即注释

(2)上代码:这些代码应该都很直观,并且可以配合项目代码一起压缩。我觉得下面的开头的注释是重点。

/*

 * HTTP Cookie:存储会话信息

 * 名称和值传送时必须是经过RUL编码的

 * cookie绑定在指定的域名下,非本域无法共享cookie,但是可以是在主站共享cookie给子站

 * cookie有一些限制:比如IE6 & IE6- 限定在20个;IE7 50个;Opear 30个...所以一般会根据【必须】需求才设定cookie

 * cookie的名称不分大小写;同时建议将cookie URL编码;路径是区分cookie在不同情况下传递的好方式;带安全标志cookie

 *     在SSL情况下发送到服务器端,http则不会。建议针对cookie设置expires、domain、 path;每个cookie小于4KB

 * */

//对cookie的封装,采取getter、setter方式

(function(global){

    //获取cookie对象,以对象表示

    function getCookiesObj(){

        var cookies = {};

        if(document.cookie){

            var objs = document.cookie.split('; ');

            for(var i in objs){

                var index = objs[i].indexOf('='),

                    name = objs[i].substr(0, index),

                    value = objs[i].substr(index + 1, objs[i].length);    

                cookies[name] = value;

            }

        }

        return cookies;

    }

    //设置cookie

    function set(name, value, opts){

        //opts maxAge, path, domain, secure

        if(name && value){

            var cookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);

            //可选参数

            if(opts){

                if(opts.maxAge){

                    cookie += '; max-age=' + opts.maxAge; 

                }

                if(opts.path){

                    cookie += '; path=' + opts.path;

                }

                if(opts.domain){

                    cookie += '; domain=' + opts.domain;

                }

                if(opts.secure){

                    cookie += '; secure';

                }

            }

            document.cookie = cookie;

            return cookie;

        }else{

            return '';

        }

    }

    //获取cookie

    function get(name){

        return decodeURIComponent(getCookiesObj()[name]) || null;

    }

    //清除某个cookie

    function remove(name){

        if(getCookiesObj()[name]){

            document.cookie = name + '=; max-age=0';

        }

    }

    //清除所有cookie

    function clear(){

        var cookies = getCookiesObj();

        for(var key in cookies){

            document.cookie = key + '=; max-age=0';

        }

    }

    //获取所有cookies

    function getCookies(name){

        return getCookiesObj();

    }

    //解决冲突

    function noConflict(name){

        if(name && typeof name === 'string'){

            if(name && window['cookie']){

                window[name] = window['cookie'];

                delete window['cookie'];

                return window[name];

            }

        }else{

            return window['cookie'];

            delete window['cookie'];

        }

    }

    global['cookie'] = {

        'getCookies': getCookies,

        'set': set,

        'get': get,

        'remove': remove,

        'clear': clear,

        'noConflict': noConflict

    };

})(window);

 (3)example

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>cookie example</title>

    </head>

    <body>

        <script type="text/javascript" src="cookie.js" ></script>

        <script type="text/javascript">

            console.log('----------cookie对象-------------');

            console.log(cookie);

            console.log('----------对象-------------');

            console.log(cookie.getCookies());

            console.log('----------设置cookie-------------');

            console.log(cookie.set('name', 'wlh'));

            console.log('----------设置cookie 123-------------');

            console.log(cookie.set('name', 'wlh123'));

            console.log('----------设置cookie age-------------');

            console.log(cookie.set('age', 20));

            console.log('----------获取cookie-------------');

            console.log(cookie.get('name'));

            console.log('----------获取所有-------------');

            console.log(cookie.getCookies());

            console.log('----------清除age-------------');

            console.log(cookie.remove('age'));

            console.log('----------获取所有-------------');

            console.log(cookie.getCookies());

            console.log('----------清除所有-------------');

            console.log(cookie.clear());

            console.log('----------获取所有-------------');

            console.log(cookie.getCookies());

            console.log('----------解决冲突-------------');

            var $Cookie = cookie.noConflict(true /*a new name of cookie*/);

            console.log($Cookie);

            console.log('----------使用新的命名-------------');

            console.log($Cookie.getCookies());

        </script>

    </body>

</html>

(4)代码地址:https://github.com/vczero/cookie

Javascript 相关文章推荐
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
jquery实现奇偶行赋值不同css值
Feb 17 Javascript
JS动态获取当前时间,并写到特定的区域
May 03 Javascript
jquery实现将获取的颜色值转换为十六进制形式的方法
Dec 20 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
SVG描边动画
Feb 23 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
Sep 19 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
Sep 27 Javascript
微信小程序如何实现全局重新加载
Jun 05 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 Javascript
JavaScript运行机制实例分析
Apr 11 Javascript
如何管理Vue中的缓存页面
Feb 06 Vue.js
分享一则javascript 调试技巧
Jan 02 #Javascript
javascript实现无限级select联动菜单
Jan 02 #Javascript
javascript实现表格排序 编辑 拖拽 缩放
Jan 02 #Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 #Javascript
javascript使用smipleChart实现简单图表
Jan 02 #Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 #Javascript
浅谈jQuery事件绑定原理
Jan 02 #Javascript
You might like
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
解析PHP强制转换类型及远程管理插件的安全隐患
2014/06/30 PHP
PHPMailer使用QQ邮箱实现邮件发送功能
2017/08/18 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
javascript Array.prototype.slice使用说明
2010/10/11 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
jQuery中data()方法用法实例
2014/12/27 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
nodejs实现遍历文件夹并统计文件大小
2015/05/28 NodeJs
JavaScript实现的多种鼠标拖放效果
2015/11/03 Javascript
学习使用grunt来打包JavaScript和CSS程序的教程
2016/01/04 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
2016/04/04 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
用js实现简单算法的实例代码
2016/09/24 Javascript
jq stop()和:is(:animated)的用法及区别(详解)
2017/02/12 Javascript
Vue.js基础学习之class与样式绑定
2017/03/20 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
微信小程序实现简单评论功能
2018/11/28 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
[00:09]DOTA2全国高校联赛 精彩活动引爆全场
2018/05/30 DOTA
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Python lambda表达式用法实例分析
2018/12/25 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
利用python计算时间差(返回天数)
2019/09/07 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
主管竞聘书范文
2014/03/31 职场文书
企业承诺书怎么写
2014/05/24 职场文书
党员服务承诺书
2014/05/28 职场文书
校庆标语集锦
2014/06/25 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书
redis实现的四种常见限流策略
2021/06/18 Redis
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis