Vue项目实操cookie相关操作封装

文章目录

1 介绍
2 utils
3 Test.vue

1 介绍

在vue中通常使用axios进项http请求，但是axios不带cookie，这里可自己获取cookie，放到参数中进行登录验证等，方法不唯一。

2 utils

cookie.js

/*** 读取cookie，* 需要注意的是cookie是不能存中文的，如果需要存中文，解决方法是后端先进行编码encode()，* 前端取出来之后用decodeURI('string')解码。（安卓可以取中文cookie，IOS不行）* */
export const b_getCookie = (c_name) => {var name = c_name + "=";var ca = document.cookie.split(';');for (var i = 0; i < ca.length; i++) {var c = ca[i];while (c.charAt(0) == ' ') c = c.substring(1);if (c.indexOf(name) != -1) {return c.substring(name.length, c.length);}}return "";
}/*** 设置cookie* c_name: cookie的名字，* value : cookie值，* expiredays: 过期时间（天数）* */
export const b_setCookie = (c_name, value, expiredays) => {var exdate = new Date();exdate.setDate(exdate.getDate() + expiredays);document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString());
}/*** 删除cookie* c_name: cookie的名字，* */
export const b_delCookie = (c_name) => {var exp = new Date();exp.setTime(exp.getTime() - 1);var cval = getCookie(c_name);if (cval != null)document.cookie = c_name + "=" + cval + ";expires=" + exp.toGMTString();
}

3 Test.vue

<template><div><el-row><el-input v-model="input" placeholder="请输入内容"></el-input><el-button @click="getCookie">获取cookie</el-button><el-button @click="setCookie">设置cookie</el-button></el-row></div>
</template>

<script>import {b_getCookie, b_setCookie} from "../utils/cookie";export default {name: "Test",data() {return {input: ''}},methods: {getCookie() {console.log("==========获取cookie===========")let username = b_getCookie("username")let password = b_getCookie("password")console.log(username);console.log(password);},setCookie() {console.log("设置cookie");b_setCookie("c_key", "c_value", 30)}}}
</script><style scoped></style>

Vue项目实操cookie相关操作封装相关推荐

SpringBoot集成Mybatis项目实操
本文为<从零打造项目>系列第三篇文章,首发于个人网站. <从零打造项目>系列文章比MyBatis Generator更强大的代码生成器 SpringBoot项目基础设施搭建 ...
python 爬虫（项目实操）
用BeautifulSoup库解析数据和提取数据,解析数据的方法是: 提取数据的方法是用find() 与find_all() 最后,我们把事情串起来,就变成下图中的模样.它所对应的,正是爬虫四步中的前 ...
新项目实操分析，用付费视频进行流量变现
我们知道,互联网的发展,使得网民越来越多,不仅上网的用户在增多,上网的时间也逐年增加. 所以很多人都想做互联网的生意,因为互联网有足够的关注度和巨大的流量.而且,互联网项目属于网上创业,硬件门槛相对较 ...
章节十五：项目实操：PK小游戏（3）
章节十五:项目实操:PK小游戏(3) 目录章节十五:项目实操:PK小游戏(3) 1. 明确项目目标 2. 分析过程,拆解项目 3. 代码实现,逐步执行 3.1 定义Book类 3.2 类BookMa ...
【Python自查手册】之项目实操
项目实操步骤分析:明确项目目标拆解(将一个问题拆解为多个步骤或者多种不同的层次,逐步解决和执行并最终达到效果)–分析过程拆到无法拆解为止解决:代码实现,逐步执行三局两胜制小游戏 # 敌我两PK ...
爬虫项目实操二、爬取“下厨房”网站的菜名、所需材料、和菜名所对应的详情页URL
项目-爬取"下厨房"网站的菜名.所需材料.和菜名所对应的详情页URL. 它有一个固定栏目,叫做"本周最受欢迎",收集了当周最招人喜欢的菜谱.地址如下: http ...
本地房产公众号项目实操分享
本地房产公众号项目实操分享房地产公众号,可以每天更新最新楼盘资讯.楼市预判.土拍信息等,文章可以不用全部原创,那我们可以从哪些地方寻找素材呢? 1.安居客;2.本地土拍网;3.本地规划网;4.房天 ...
Python17_项目实操关卡-人机PK
项目实操关卡-人机PK 通过实战去成长,这体现在:能在学习初期就知道什么是关键知识,了解专业程序员一般是怎么思考和解决问题的,在一遍遍分析问题.拆解问题及解决问题的过程中真正地理解知识,并用这些知识来 ...
拳王虚拟项目公社：闲鱼知乎引流售卖虚拟资源的虚拟副业项目实操
我们知道,虚拟资源的优势就在于成本低,一部手机都可以储存,就拿影视资源来说,每个月都会有一些全新的电影电视剧上映,所以每一部影视剧上映都是自带流量的,那么我们如何借助这一些影视资源来进行一个引流呢? ...

Vue项目实操cookie相关操作封装

文章目录

1 介绍

2 utils

3 Test.vue

Vue项目实操cookie相关操作封装相关推荐

最新文章

热门文章