电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

在vue中使用cookie記住用戶上次選擇的實(shí)例(本次例子中為下拉框)

瀏覽:92日期:2022-11-23 13:36:50

最近工作中碰到一個需求,添加一條數(shù)據(jù)時,自動記住上次選擇的下拉框的數(shù)據(jù),剛開始覺得沒思路,后來請教了項目組長,組長直接一句,這不很簡單吧,直接用cookie,我:.......

好吧,都王的差不多了,于是經(jīng)過一番百度實(shí)踐,測試,總算是可以了,接下來就說說實(shí)踐以及一些坑!

開發(fā)環(huán)境: webpack+vue+java后臺

要實(shí)現(xiàn)這個小功能,其實(shí)只需要在vue中寫相應(yīng)的功能就可以了,并不需要在后臺寫什么,但是如果寫的不正確,后臺也是會報錯的,代碼如下:

先把這幾個方法寫上,刪除的看需求決定需不需要:

//設(shè)置cookie setCookie(projectId,exdays) { var exdate=new Date();//獲取時間 exdate.setTime(exdate.getTime() + 24*60*60*1000*exdays);//保存的天數(shù) //字符串拼接cookie window.document.cookie='projectId'+ '=' +projectId+';expires='+exdate.toGMTString(); }, //讀取cookie getCookie:function () { console.log(document.cookie); let me=this; if (document.cookie.length>0) { var arr=document.cookie.split(’; ’);//這里顯示的格式需要切割一下自己可輸出看下 for(var i=0;i<arr.length;i++){ var arr2=arr[i].split(’=’);//再次切割 //判斷查找相對應(yīng)的值 if(arr2[0]==’projectId’){me.workhourData.projectId=arr2[1];//保存到保存數(shù)據(jù)的地方 } } } }, //清除cookie clearCookie:function () { this.setCookie('','',-1);//修改2值都為空,天數(shù)為負(fù)1天就好了 },

我這里是只需要一個projectId即可,實(shí)際中可以根據(jù)具體需求設(shè)置,

注意,這里有個坑,那就是中文,如果你需要存儲中文cookie,而不進(jìn)行任何處理的話,那么后臺是會報錯的,

java.lang.IllegalArgumentException: Control character in cookie value or attribute

這個錯誤一般是中文編碼引起的,中文采用的是Unicode編碼,而英文采用的是ASCII編碼,當(dāng)Cookie保存中文的時候需要對中文進(jìn)行編碼,而且從Cookie中取出內(nèi)容的時候也要進(jìn)行解碼,所以必須特殊處理

escape(value) 編碼

cookievalue=unescape(value); 解碼

百度有恨多中方法,這里不多說!

然后就是在頁面每一次加載的時候去調(diào)用this.getCookie()方法就可以了,

還要記住一點(diǎn)是,保存的時候也要設(shè)置cookie,這樣才會生效,還有就是時間問題了,根據(jù)具體需求傳參即可!

最后需要說的時,如果一旦報錯或者不想要cookie了,可以手動清楚瀏覽器cookie!,這是最快的方式:

在vue中使用cookie記住用戶上次選擇的實(shí)例(本次例子中為下拉框)

補(bǔ)充知識:vue 前后端分離調(diào)用后端數(shù)據(jù)(加深記憶)

1、在.vue文件中引入調(diào)用對應(yīng)后臺數(shù)據(jù)方法,并調(diào)用此方法

import {getAccount} from ’../assets/js/index’

2、前端申請后臺數(shù)據(jù)(安裝axios依賴)

//上方引入的index.jsimport axios from ’axios’import {baseUrl} from './config';import $ from ’jquery’import ’./base’export const getAccount=()=>{ return axios.post(`${baseUrl}/index/index/index`).then(res=>{ return res.data; })}//config.jsexport const baseUrl=’http://shagua.com’;//base.jsimport axios from ’axios’;import qs from ’qs’;import router from ’../../router’axios.defaults.withCredentials=true; //允許跨域發(fā)送cookieaxios.defaults.transformRequest = [function(data) { //解析post數(shù)據(jù) if(typeof data==’object’){ return qs.stringify(data); }else{ return data; } }];axios.defaults.transformResponse=[function(data){ //攔截response請求,做統(tǒng)一跳轉(zhuǎn) data=JSON.parse(data); if(data.status==’-99’){ router.push({path:’/login’}); } return data;}];

3、后端接收前端申請并返回數(shù)據(jù)(此處使用tp5,這里是允許訪問,后臺業(yè)務(wù)去對應(yīng)調(diào)用的方法里寫)

//跨域訪問的時候才會存在此字段$origin = isset($_SERVER[’HTTP_ORIGIN’]) ? $_SERVER[’HTTP_ORIGIN’] : ’’; $allow_origin = array( ’http://localhost:8080’,); if(in_array($origin, $allow_origin)){ header(’Access-Control-Allow-Credentials: true’); header('Access-Control-Allow-Headers: *'); header(’Access-Control-Allow-Origin:’.$origin); header(’Access-Control-Max-Age:3600’);}

以上這篇在vue中使用cookie記住用戶上次選擇的實(shí)例(本次例子中為下拉框)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: Vue
相關(guān)文章:
主站蜘蛛池模板: 避光流动池-带盖荧光比色皿-生化流动比色皿-宜兴市晶科光学仪器 东莞爱加真空科技有限公司-进口真空镀膜机|真空镀膜设备|Polycold维修厂家 | 脉冲除尘器,除尘器厂家-淄博机械| 压接机|高精度压接机|手动压接机|昆明可耐特科技有限公司[官网] 胶泥瓷砖胶,轻质粉刷石膏,嵌缝石膏厂家,腻子粉批发,永康家德兴,永康市家德兴建材厂 | 三佳互联一站式网站建设服务|网站开发|网站设计|网站搭建服务商 赛默飞Thermo veritiproPCR仪|ProFlex3 x 32PCR系统|Countess3细胞计数仪|371|3111二氧化碳培养箱|Mirco17R|Mirco21R离心机|仟诺生物 | 全温恒温摇床-水浴气浴恒温摇床-光照恒温培养摇床-常州金坛精达仪器制造有限公司 | 磁棒电感生产厂家-电感器厂家-电感定制-贴片功率电感供应商-棒形电感生产厂家-苏州谷景电子有限公司 | 华夏医界网_民营医疗产业信息平台_民营医院营销管理培训 | 步进电机_agv电机_伺服马达-伺服轮毂电机-和利时电机 | 短信通106短信接口验证码接口群发平台_国际短信接口验证码接口群发平台-速度网络有限公司 | Dataforth隔离信号调理模块-信号放大模块-加速度振动传感器-北京康泰电子有限公司 | 泰安塞纳春天装饰公司【网站】 | LCD3D打印机|教育|桌面|光固化|FDM3D打印机|3D打印设备-广州造维科技有限公司 | 自清洗过滤器,浅层砂过滤器,叠片过滤器厂家-新乡市宇清净化 | 耐高温风管_耐高温软管_食品级软管_吸尘管_钢丝软管_卫生级软管_塑料波纹管-东莞市鑫翔宇软管有限公司 | 岩石钻裂机-液压凿岩机-劈裂机-挖改钻_湖南烈岩科技有限公司 | 合肥触摸一体机_触摸查询机厂家_合肥拼接屏-安徽迅博智能科技 | 塑胶跑道施工-硅pu篮球场施工-塑胶网球场建造-丙烯酸球场材料厂家-奥茵 | 水质传感器_水质监测站_雨量监测站_水文监测站-山东水境传感科技有限公司 | 碳纤维复合材料制品生产定制工厂订制厂家-凯夫拉凯芙拉碳纤维手机壳套-碳纤维雪茄盒外壳套-深圳市润大世纪新材料科技有限公司 | 电机修理_二手电机专家-河北豫通机电设备有限公司(原石家庄冀华高压电机维修中心) | 立式壁挂广告机厂家-红外电容触摸一体机价格-华邦瀛 | 蓝米云-专注于高性价比香港/美国VPS云服务器及海外公益型免费虚拟主机 | SMN-1/SMN-A ABB抽屉开关柜触头夹紧力检测仪-SMN-B/SMN-C-上海徐吉 | 全自动五线打端沾锡机,全自动裁线剥皮双头沾锡机,全自动尼龙扎带机-东莞市海文能机械设备有限公司 | 厚壁钢管-厚壁无缝钢管-小口径厚壁钢管-大口径厚壁钢管 - 聊城宽达钢管有限公司 | 丙烷/液氧/液氮气化器,丙烷/液氧/液氮汽化器-无锡舍勒能源科技有限公司 | 轻型地埋电缆故障测试仪,频响法绕组变形测试仪,静荷式卧式拉力试验机-扬州苏电 | 自恢复保险丝_贴片保险丝_力特保险丝_Littelfuse_可恢复保险丝供应商-秦晋电子 | 讲师宝经纪-专业培训机构师资供应商_培训机构找讲师、培训师、讲师经纪就上讲师宝经纪 | 医养体检包_公卫随访箱_慢病随访包_家签随访包_随访一体机-济南易享医疗科技有限公司 | ERP企业管理系统永久免费版_在线ERP系统_OA办公_云版软件官网 | 设计圈 - 让设计更有价值!| 安平县鑫川金属丝网制品有限公司,声屏障,高速声屏障,百叶孔声屏障,大弧形声屏障,凹凸穿孔声屏障,铁路声屏障,顶部弧形声屏障,玻璃钢吸音板 | 高硼硅玻璃|水位计玻璃板|光学三棱镜-邯郸奥维玻璃科技有限公司 高温高压釜(氢化反应釜)百科 | 成都亚克力制品,PVC板,双色板雕刻加工,亚克力门牌,亚克力标牌,水晶字雕刻制作-零贰捌广告 | 泉州陶瓷pc砖_园林景观砖厂家_石英砖地铺石价格 _福建暴风石英砖 | vr安全体验馆|交通安全|工地安全|禁毒|消防|安全教育体验馆|安全体验教室-贝森德(深圳)科技 | 双工位钻铣攻牙机-转换工作台钻攻中心-钻铣攻牙机一体机-浙江利硕自动化设备有限公司 | 北京网络营销推广_百度SEO搜索引擎优化公司_网站排名优化_谷歌SEO - 北京卓立海创信息技术有限公司 | 丹尼克尔拧紧枪_自动送钉机_智能电批_柔性振动盘_螺丝供料器品牌 | 定量包装秤,吨袋包装称,伸缩溜管,全自动包装秤,码垛机器人,无锡市邦尧机械工程有限公司 |