前端项目开发时，常常需要很多小技巧，比如使用Cookie巧妙实现某个效果。此次就以Vue项目记录一下如何使用Cookie。
cookie.js
/**
* 写入cookie
* @param {*} name
* @param {*} value
* @param {*} time
*/
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();
}
/**
* 设置过期时间
* @param {*} str
* @returns
*/
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;
}
}
/**
* 读取cookie
* @param {*} name
* @returns
*/
function getCookie(name) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
if (arr = document.cookie.match(reg)) return unescape(arr[2]);
else return null;
}
/**
* 删除cookie
* @param {*} name
*/
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();
}
export {
setCookie,
getCookie,
delCookie
}引用Cookie的文件，如index.vue
import {
setCookie,
getCookie,
delCookie
} from '../utils/cookie';
methods: {
setValToCookie() {
let target_json = {};
target_json['username'] = "Vegeta";
setCookie("target_json", JSON.stringify(target_json), "s10");// 设置该cookie的键值以及10秒的过期时间
},
getValToCookie() {
let target_str = getCookie("target_json")
console.log("target_str =>", target_str)
if(target_str != null) {
let target_json = JSON.parse(target_str)
if(target_json.username == 'Vegeta') {
// Todo
delCookie("target_json")// 删除该Cookie
}
}
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/151157.html
