最近迷上了react，用react模拟之前的系统，做登录的时候，发现需要用到cookie，之前用的跟vue搭配的VueCookie，我就在想啊，react应该也会有相应的cookie插件吧！百度一下，果然，是有的，那就是react-cookie，看名字貌似很专业的样子哈
我也去百度了下他的用法，官网搞的很复杂，可能是本人水平太低了，官网咱也看不懂，咱也不敢说，咱也不敢问的，可怜巴巴！
于是我用百度到的用法，在react-create-app中各种报错，第一步引入就报错了，搞了半天，还是各种报错，请允许我悲伤一会，悲伤过后（卧槽，还自带旁白？这是高手。。），我的倔脾气就上来了，不就是一个小cookie吗？我自己用原生js封装一个行吧，老子也当个造物主！！！
下面我给捋一下咱的需求哈，要知道我们封装的插件可以用来干什么，完成什么功能
- 设置cookie，这次咱来个好玩的，咱要设置cookie，肯定要设置到期时间的对吧，咱们这样设计，设置过期时间，可以按秒，分，时，天，月，年来设置，比如我要设置cookie设置一天，就直接配置 {type:“天”,expires:1},我要cookie设置两个小时，那么我就这样配置{type:“时”,expires:2}，这样多省劲儿，你说呢（默认过期时间是以天为单位的）！
- 获取cookie，当然了，获取之前要判断cookie是否过期了，如果没过期，就返回咱们存进去的cookie值，如果过期了，咱就给他返回一个false
- 删除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引入，爽！
那我们就来用这种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，搞出三个按钮
<!DOCTYPE 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>cookie</title>
</head>
<body>
<button onclick = "addCookie()">存储cookie</button>
<button onclick = "getCookie()">得到cookie</button>
<button onclick = "removeCookie()">删除cookie</button>
<script src = "./js/myCookie.js"></script>
<script>
let cookie = new Cookie();
console.log(cookie);
function addCookie(){
cookie.setCookie('name','三哥');
}
function getCookie(){
let name = cookie.getCookie('name');
console.log(name);
}
function removeCookie(){
cookie.removeCookie('name');
}
</script>
</body>
</html>
我们点击存储cookie按钮
再点击得到cookie按钮
打印出来了
再点击删除cookie按钮
cookie被删掉了，现在我们再点击得到cookie按钮
变成了false，ok今天的用原生js封装cookie插件就到这里吧！希望能帮到你！
（卧槽！我的react系统好像还没写多少啊！！！！再见了，各位。。。。）
866
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
