前端cookie操作用到的一些小总结
前后端完全分离的是目前web开发的大趋势,包括现下流行的前端框架的应用vue,angular,在不同页面跳转时,前端需要对用户登录状态进行判断,拿到用户的id,除了Ajax从服务器端获取数据外,对cookie的操作亦必不可少。
设置cookie
每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie:
document.cookie="userId=666";
如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如:
document.cookie="userId=666; userName=steve";
在cookie的名或值中不能使用分号(;)、逗号(,)、等号(=)以及空格。
保存的值是不确定的解决方案:用escape()函数进行编码,它能将一些特殊符号使用十六进制表示,例如空格将会编码为“20%”,从而可以存储于cookie值中,而且使用此种方案还可以避免中文乱码的出现。
例如:
document.cookie="str="+escape("I love javascript");
相当于: document.cookie="str=I%20love%20javascript";
当使用escape()编码后,在取出值以后需要使用unescape()进行解码才能得到原来的cookie值。
首先设置两个看看:
document.cookie = "userId=666";
document.cookie = "userName=steve";
var myCookie = document.cookie;
console.log(myCookie)
封装的cookie操作:
//toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串,并返回结果。
//不赞成使用此方法:请使用 toUTCString() 取而代之。
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else {
return null;
}
function delCookie(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = getCookie(name);
if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
}
//设定自定义过期时间 ,程序代码
function setCookie(name, value, time) {
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec * 1);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
}
function getsec(str) {
var str1 = str.substring(1, str.length) * 1;
var str2 = str.substring(0, 1);
if (str2 == "s") {
return str1 * 1000;
} else if (str2 == "h") {
return str1 * 60 * 60 * 1000;
} else if (str2 == "d") {
return str1 * 24 * 60 * 60 * 1000;
}
}
//有设定过期时间的使用:
//s20是代表20秒
//h是指小时,如12小时则是:h12
//d是天数,30天则:d30
//以下是测试代码:
setCookie("name", "mark", "s5");
console.log(myCookie);
setTimeout(function(){
delCookie("userName");
console.log(myCookie);
}, 7000 );
//==============================整理一下,项目应用
(function() {
var myCookie = {};
myCookie.getCookie = function(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return null;
};
function getsec(str) {
var str1 = str.substring(1, str.length) * 1;
var str2 = str.substring(0, 1);
if (str2 == "s") {
return str1 * 1000;
} else if (str2 == "h") {
return str1 * 60 * 60 * 1000;
} else if (str2 == "d") {
return str1 * 24 * 60 * 60 * 1000;
}
};
myCookie.setCookie = function(name, value, time) {
var strsec = getsec(time);
var exp = new Date();
exp.setTime(exp.getTime() + strsec * 1);
document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
};
myCookie.delCookie = function(name) {
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval = myCookie.getCookie(name);
if (cval != null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
};
window.myCookie = myCookie;
})(window.myCookie || {});
//初始cookie数据
document.cookie = "userId=666";
document.cookie = "userName=stevejobs";
myCookie.setCookie("name", "helloword", "s5");
console.log(document.cookie);
setTimeout(function() {
myCookie.delCookie("userName");
console.log(document.cookie);
}, 7000);