原生js封装cookie插件

最近迷上了react,用react模拟之前的系统,做登录的时候,发现需要用到cookie,之前用的跟vue搭配的VueCookie,我就在想啊,react应该也会有相应的cookie插件吧!百度一下,果然,是有的,那就是react-cookie,看名字貌似很专业的样子哈
原生js封装cookie插件_第1张图片
我也去百度了下他的用法,官网搞的很复杂,可能是本人水平太低了,官网咱也看不懂,咱也不敢说,咱也不敢问的,可怜巴巴!
原生js封装cookie插件_第2张图片
于是我用百度到的用法,在react-create-app中各种报错,第一步引入就报错了,搞了半天,还是各种报错,请允许我悲伤一会,悲伤过后(卧槽,还自带旁白?这是高手。。),我的倔脾气就上来了,不就是一个小cookie吗?我自己用原生js封装一个行吧,老子也当个造物主!!!
原生js封装cookie插件_第3张图片
下面我给捋一下咱的需求哈,要知道我们封装的插件可以用来干什么,完成什么功能

  1. 设置cookie,这次咱来个好玩的,咱要设置cookie,肯定要设置到期时间的对吧,咱们这样设计,设置过期时间,可以按秒,分,时,天,月,年来设置,比如我要设置cookie设置一天,就直接配置 {type:“天”,expires:1},我要cookie设置两个小时,那么我就这样配置{type:“时”,expires:2},这样多省劲儿,你说呢(默认过期时间是以天为单位的)!
  2. 获取cookie,当然了,获取之前要判断cookie是否过期了,如果没过期,就返回咱们存进去的cookie值,如果过期了,咱就给他返回一个false
  3. 删除cookie,这样就不需要多说了吧,直接删除存进去的cookie,啥过期时间啊,不存在了

好了,我们的需求也就这三条了,我相信大多数人写程序的时候也就用到这三条最多的吧,也可能有其它奇葩要求,那就自己在我这个基础上新增功能就可以了,好了我们废话不多说,直接上代码

1. import版本

为什么要有这么一个版本呢,现在的前端开发,谁不弄个打包工具,或者脚手架啥的?比如vue-cli,react-create-app,angular-cli等,如果没用这三大巨头框架的话,自己也会用个webpack或者gulp之类的框架自己搭建一个吧,我这个import版本就是用在支持import语法的这些脚手架的,看下代码你就明白了,就一个cookie.js

export default{
    setCookie(name,value,obj){//设置cookie
        let config = {
            type:"天"
        }
        if(obj){
            Object.assign(config,obj);
        }
        let oDate = new Date();
        let expires = null;
        if(config.expires){
            if(config.type){
                switch (config.type){
                    case '秒':
                        oDate.setSeconds(oDate.getSeconds() + config.expires)
                        expires = oDate.toUTCString();
                    break;
                    case '分':
                        oDate.setMinutes(oDate.getMinutes() + config.expires)
                        expires = oDate.toUTCString();
                    break;
                    case '时':
                        oDate.setHours(oDate.getHours() + config.expires)
                        expires = oDate.toUTCString();
                    break;
                    case '天':
                        oDate.setDate(oDate.getDate() + config.expires);
                        expires = oDate.toUTCString();
                    break;
                    case '月':
                        oDate.setMonth(oDate.getMonth() + config.expires);
                        expires = oDate.toUTCString();
                    break;
                    case '年':
                        oDate.setFullYear(oDate.getFullYear() + config.expires);
                        expires = oDate.toUTCString();
                    break;
                    default:
                        oDate.setDate(oDate.getDate() + config.expires);
                        expires = oDate.toUTCString();
                    break;
                }
            }else{
                oDate.setDate(oDate.getDate() + config.expires);
                expires = oDate.toUTCString();
            }
        }else{
            oDate.setDate(oDate.getDate() + 1);
            expires = oDate.toUTCString();
        }
        document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + expires;
    },
    getCookie(key){//获取cookie
        let str = document.cookie.replace(/;\s*/,';');
        let cookieArr = str.split(';');
        let cookieObj = {};
        let len = cookieArr.length;
        for(let i = 0; i < len;i++){
            let data = cookieArr[i];
            let k = data.split('=')[0];
            let v = data.split('=')[1];
            cookieObj[k] = v;
        }
        if(cookieObj[key]){
            return decodeURIComponent(cookieObj[key]);
        }else{
            return false;
        }
    },
    removeCookie(key){//删除cookie
        document.cookie = key + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
    }
}

至于用法嘛,import引入就可以了

import cookie from '../../server/cookie';

然后

cookie.setCookie('name','三哥',{//设置cookie
      expires:1
 });
let name = cookie.getCookie('name');//获取cookie
cookie.removeCookie('name');//删除cookie

大功告成

2. script引入版本

当然了,这第二个版本就是给一些前端小白准备的,比如我刚刚入行,或者我本来就不会那些脚手架,什么webpack,听都没听过,能吃吗?(WTF?)老夫写代码只会用script引入,爽!
原生js封装cookie插件_第4张图片
那我们就来用这种script的方式来测试下我们的插件好不好用
我先来出示下这个版本的代码,其中核心代码没有变,只不过用了ES6的Class类

(function(window,document){
    class Cookie{
        setCookie(name,value,obj){//设置cookie
            let config = {
                type:"天"
            }
            if(obj){
                Object.assign(config,obj);
            }
            let oDate = new Date();
            let expires = null;
            if(config.expires){
                if(config.type){
                    switch (config.type){
                        case '秒':
                            oDate.setSeconds(oDate.getSeconds() + config.expires)
                            expires = oDate.toUTCString();
                        break;
                        case '分':
                            oDate.setMinutes(oDate.getMinutes() + config.expires)
                            expires = oDate.toUTCString();
                        break;
                        case '时':
                            oDate.setHours(oDate.getHours() + config.expires)
                            expires = oDate.toUTCString();
                        break;
                        case '天':
                            oDate.setDate(oDate.getDate() + config.expires);
                            expires = oDate.toUTCString();
                        break;
                        case '月':
                            oDate.setMonth(oDate.getMonth() + config.expires);
                            expires = oDate.toUTCString();
                        break;
                        case '年':
                            oDate.setFullYear(oDate.getFullYear() + config.expires);
                            expires = oDate.toUTCString();
                        break;
                        default:
                            oDate.setDate(oDate.getDate() + config.expires);
                            expires = oDate.toUTCString();
                        break;
                    }
                }else{
                    oDate.setDate(oDate.getDate() + config.expires);
                    expires = oDate.toUTCString();
                }
            }else{
                oDate.setDate(oDate.getDate() + 1);
                expires = oDate.toUTCString();
            }
            document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + expires;
        }
        getCookie(key){//获取cookie
            let str = document.cookie.replace(/;\s*/,';');
            let cookieArr = str.split(';');
            let cookieObj = {};
            let len = cookieArr.length;
            for(let i = 0; i < len;i++){
                let data = cookieArr[i];
                let k = data.split('=')[0];
                let v = data.split('=')[1];
                cookieObj[k] = v;
            }
            if(cookieObj[key]){
                return decodeURIComponent(cookieObj[key]);
            }else{
                return false;
            }
        }
        removeCookie(key){//删除cookie
            document.cookie = key + "=;expires=Thu, 01 Jan 1970 00:00:00 GMT";
        }
    }
    window.Cookie = Cookie;
})(window,document);

现在我们新建一个html,搞出三个按钮


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>cookietitle>
head>
<body>
    

你可能感兴趣的:(JavaScript)