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中null与undefined分析
Jul 25 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
vue-cli项目如何使用vue-resource获取本地的json数据(模拟服务端返回数据)
Aug 04 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
javascript trie前缀树的示例
Jan 29 Javascript
创建Vue项目以及引入Iview的方法示例
Dec 03 Javascript
Vue 样式绑定的实现方法
Jan 15 Javascript
webpack DllPlugin xxx is not defined解决办法
Dec 13 Javascript
解决vue项目router切换太慢问题
Jul 19 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 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基础知识:类与对象(5) static
2006/12/13 PHP
通用PHP动态生成静态HTML网页的代码
2010/03/04 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
javascript数组的扩展实现代码集合
2008/06/01 Javascript
js判断浏览器版本以及浏览器内核的方法
2015/01/20 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
使用use注册Vue全局组件和全局指令的方法
2018/03/08 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
JS实现拖拽元素时与另一元素碰撞检测
2020/08/27 Javascript
react+antd 递归实现树状目录操作
2020/11/02 Javascript
python用ConfigObj读写配置文件的实现代码
2013/03/04 Python
python在windows下实现备份程序实例
2014/07/04 Python
Python标准库与第三方库详解
2014/07/22 Python
Python的Django框架中的select_related函数对QuerySet 查询的优化
2015/04/01 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
tensorflow实现训练变量checkpoint的保存与读取
2020/02/10 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
护理学毕业生求职信
2013/11/14 职场文书
文案策划求职信
2014/03/18 职场文书
医院院务公开实施方案
2014/05/03 职场文书
初三学生语文考试作弊检讨书
2014/12/14 职场文书
个人求职信格式范文
2015/03/20 职场文书
2015年新农合工作总结
2015/03/30 职场文书
2016暑期政治学习心得体会
2016/01/23 职场文书
带你学习MySQL执行计划
2021/05/31 MySQL
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
Java存储没有重复元素的数组
2022/04/29 Java/Android