Vue项目使用Cookie，以Json格式存入与读取Cookie，设置过期时间以及删除操作

前端项目开发时，常常需要很多小技巧，比如使用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') {// TododelCookie("target_json")// 删除该Cookie}}}
}

Vue项目使用Cookie，以Json格式存入与读取Cookie，设置过期时间以及删除操作相关推荐

解决vue项目中prettier、eslint格式冲突问题
解决vue项目中prettier.eslint格式冲突问题我是用prettier作为vscode默认的格式化插件的,vue项目自动保存的时候,格式化,会自动在代码末尾添加分号,单引号会自动变成双引号 ...
Node.js：项目中的 package.json 格式
1. node.js 项目包下的 package.json : 实例: {"name" : "chatroooms","version" : ...
C# JSON格式的字符串读取到类中
2019独角兽企业重金招聘Python工程师标准>>> 将JSON格式的字符串读取到类中本例中建立JSON格式的字符串json,将其内容读取到Person类中运行本代码需要添加引 ...
前端小白闲着没事，封装一个可以设置过期时间的localStorage存储函数，在vue脚手架中使用
本身localStorage 是没有这个功能的,除非手动删除要不永久保存在本地. seesionStorage 我们就不考虑他这个只要网页的标签关闭了在当前标签就自动清除了存储. 在工作中我们用 ...
java cookie过期_Java中Servlet Cookie设置过期时间（expires,max-age）
Java中Servlet Cookie设置过期时间(expires,max-age) expires或者max-age指定了coolie的生存期,默认情况下coolie是暂时存在的,他们存储的值只在浏 ...
vue项目引入并使用svg格式图标文件
先创建一个vue项目参考代码如下 vue create svgtext 然后引入一个第三方依赖svg-sprite-loader 参考代码如下 npm i svg-sprite-loader@6. ...
C# 系统应用之Cookie\Session基础知识及php读取Cookie\Session
本文主要是毕业设计"个人电脑使用记录清除软件"系列系统应用文章中关于Cookie方面的知识,主要从介绍Cookie的基础知识和PHP关于Cookie\Session两个会话管理机制 ...
php setcookie 过期,php cookie怎么设置过期时间？
PHP中可以使用setcookie()函数设置cookie的过期时间.语法为"setcookie(name,value,expire,path,domain,secure)":其中 ...
cookie设置过期时间
封装初衷-不想每次设置cookie的过期时间都写一遍,比较烦! 目前这个包放在npm库中,下载npm install happycookie class happyCookie {constructo ...

Vue项目使用Cookie，以Json格式存入与读取Cookie，设置过期时间以及删除操作

Vue项目使用Cookie，以Json格式存入与读取Cookie，设置过期时间以及删除操作相关推荐

最新文章

热门文章