首页 web前端 js教程 javascript制作的cookie封装及使用指南_javascript技巧

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

May 16, 2016 pm 04:22 PM
cookie javascript 封装

一、前言

之前使用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

复制代码 代码如下:



   
       
        cookie example
   
   
       
       
   

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

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

cookie是存在哪里 cookie是存在哪里 Dec 20, 2023 pm 03:07 PM

Cookie通常存储在浏览器的Cookie文件夹中的,浏览器中的Cookie文件通常以二进制或SQLite格式存储,如果直接打开Cookie文件,可能会看到一些乱码或无法读取的内容,因此最好使用浏览器提供的Cookie管理界面来查看和管理Cookie。

电脑上的cookie在哪里 电脑上的cookie在哪里 Dec 22, 2023 pm 03:46 PM

电脑上的Cookie存储在浏览器的特定位置,具体位置取决于使用的浏览器和操作系统:1、Google Chrome, 存储在C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data\Default\Cookies中等等。

集邦咨询:英伟达 Blackwell 平台产品带动台积电今年 CoWoS 产能提高 150% 集邦咨询:英伟达 Blackwell 平台产品带动台积电今年 CoWoS 产能提高 150% Apr 17, 2024 pm 08:00 PM

本站4月17日消息,集邦咨询(TrendForce)近日发布报告,认为英伟达Blackwell新平台产品需求看涨,预估带动台积电2024年CoWoS封装总产能提升逾150%。英伟达Blackwell新平台产品包括B系列的GPU,以及整合英伟达自家GraceArmCPU的GB200加速卡等。集邦咨询确认为供应链当前非常看好GB200,预估2025年出货量有望超过百万片,在英伟达高端GPU中的占比达到40-50%。在英伟达计划下半年交付GB200以及B100等产品,但上游晶圆封装方面须进一步采用更复

手机cookie在哪里 手机cookie在哪里 Dec 22, 2023 pm 03:40 PM

手机上的Cookie存储在移动设备的浏览器应用程序中:1、在iOS设备上,Cookie存储在Safari浏览器的Settings -> Safari -> Advanced -> Website Data中;2、在Android设备上,Cookie 存储在Chrome浏览器的Settings -> Site settings -> Cookies中等等。

浏览器cookie的存储位置详解 浏览器cookie的存储位置详解 Jan 19, 2024 am 09:15 AM

随着互联网的普及,我们使用浏览器进行上网已经成为一种生活方式。在日常使用浏览器过程中,我们经常会遇到需要输入账号密码的情况,如网购、社交、邮件等。这些信息需要浏览器记录下来,以便于下次访问时不需要再次输入,这时候Cookie就派上了用场。什么是Cookie?Cookie是指由服务器端发送到用户浏览器上并存储在本地的一种小型数据文件,它包含了一些网站的用户行为

简易JavaScript教程:获取HTTP状态码的方法 简易JavaScript教程:获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程:如何获取HTTP状态码,需要具体代码示例前言:在Web开发中,经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时,我们经常需要获取返回的HTTP状态码来判断操作是否成功,根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码,并提供一些实用的代码示例。使用XMLHttpRequest

AMD 'Strix Halo” FP11 封装尺寸曝光:和英特尔 LGA1700 相当,比 Phoenix 大 60% AMD 'Strix Halo” FP11 封装尺寸曝光:和英特尔 LGA1700 相当,比 Phoenix 大 60% Jul 18, 2024 am 02:04 AM

本站7月9日消息,AMDZen5架构“Strix”系列处理器会有两种封装方案,其中较小的StrixPoint将采用FP8封装,而StrixHalo将会采用FP11封装。图源:videocardz消息源@Olrak29_最新曝料称StrixHalo的FP11封装尺寸为37.5mm*45mm(1687平方毫米),和英特尔AlderLake、RaptorLakeCPU的LGA-1700封装尺寸相同。AMD最新的PhoenixAPU采用FP8封装方案,尺寸为25*40mm,这意味着StrixHalo的F

Cookie设置的常见问题及解决方案 Cookie设置的常见问题及解决方案 Jan 19, 2024 am 09:08 AM

Cookie设置的常见问题及解决方案,需要具体代码示例随着互联网的发展,Cookie作为一种最常见的常规技术,已经广泛应用于网站和应用程序中。Cookie,简单来说,是一种存储在用户计算机上的数据文件,可用于存储用户在网站上的信息,包括登录名、购物车内容、网站首选项等等。Cookie对于开发人员来说是一种必不可少的工具,但与此同时,Cookie设置常常会遇到

See all articles