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 相关文章推荐
jQuery中的val()示例应用
Feb 26 Javascript
javascript常用代码段搜集
Dec 04 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
jquery实现简易的移动端验证表单
Nov 08 Javascript
jquery获取文档高度和窗口高度汇总
Jan 25 Javascript
jQuery基于muipicker实现仿ios时间选择
Feb 22 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
element-ui 表格实现单元格可编辑的示例
Feb 26 Javascript
jQuery实现的两种简单弹窗效果示例
Apr 18 jQuery
分享一则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.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PHP中empty和isset对于参数结构的判断及empty()和isset()的区别
2015/11/15 PHP
深入了解PHP中的Array数组和foreach
2016/11/06 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
JavaScript实现区块链
2018/03/14 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
pygame学习笔记(4):声音控制
2015/04/15 Python
深入理解python多进程编程
2016/06/12 Python
利用python生成一个导出数据库的bat脚本文件的方法
2016/12/30 Python
Python实现图片拼接的代码
2018/07/02 Python
Python Flask前后端Ajax交互的方法示例
2018/07/31 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
python实现烟花小程序
2019/01/30 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
Python Selenium 之数据驱动测试的实现
2019/08/01 Python
Python连接Oracle之环境配置、实例代码及报错解决方法详解
2020/02/11 Python
pyautogui自动化控制鼠标和键盘操作的步骤
2020/04/01 Python
Python中return函数返回值实例用法
2020/11/19 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
详解canvas绘图时遇到的跨域问题
2018/03/22 HTML / CSS
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
大学生农村教师实习自我鉴定
2013/09/21 职场文书
教育学专业毕业生的自我评价
2013/11/21 职场文书
化工专业大学生职业生涯规划书
2014/01/14 职场文书
网络程序员自荐信
2014/01/25 职场文书
施工协议书范本
2014/04/22 职场文书
詹天佑教学反思
2014/04/30 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
水电工岗位职责
2015/02/14 职场文书
曾国藩励志经典名言37句,蕴含哲理
2019/10/14 职场文书
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技