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

您的位置:首頁技術文章
文章詳情頁

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

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

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

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

開發環境: webpack+vue+java后臺

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

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

//設置cookie setCookie(projectId,exdays) { var exdate=new Date();//獲取時間 exdate.setTime(exdate.getTime() + 24*60*60*1000*exdays);//保存的天數 //字符串拼接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(’=’);//再次切割 //判斷查找相對應的值 if(arr2[0]==’projectId’){me.workhourData.projectId=arr2[1];//保存到保存數據的地方 } } } }, //清除cookie clearCookie:function () { this.setCookie('','',-1);//修改2值都為空,天數為負1天就好了 },

我這里是只需要一個projectId即可,實際中可以根據具體需求設置,

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

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

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

escape(value) 編碼

cookievalue=unescape(value); 解碼

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

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

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

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

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

補充知識:vue 前后端分離調用后端數據(加深記憶)

1、在.vue文件中引入調用對應后臺數據方法,并調用此方法

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

2、前端申請后臺數據(安裝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; //允許跨域發送cookieaxios.defaults.transformRequest = [function(data) { //解析post數據 if(typeof data==’object’){ return qs.stringify(data); }else{ return data; } }];axios.defaults.transformResponse=[function(data){ //攔截response請求,做統一跳轉 data=JSON.parse(data); if(data.status==’-99’){ router.push({path:’/login’}); } return data;}];

3、后端接收前端申請并返回數據(此處使用tp5,這里是允許訪問,后臺業務去對應調用的方法里寫)

//跨域訪問的時候才會存在此字段$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記住用戶上次選擇的實例(本次例子中為下拉框)就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 新疆系统集成_新疆系统集成公司_系统集成项目-新疆利成科技 | 带式过滤机厂家_价格_型号规格参数-江西核威环保科技有限公司 | 企小优-企业数字化转型服务商_网络推广_网络推广公司 | 真空冷冻干燥机_国产冻干机_冷冻干燥机_北京四环冻干 | 外贸网站建设-外贸网站设计制作开发公司-外贸独立站建设【企术】 | 硫酸亚铁-聚合硫酸铁-除氟除磷剂-复合碳源-污水处理药剂厂家—长隆科技 | 山东信蓝建设有限公司官网 | 超声波焊接机,振动摩擦焊接机,激光塑料焊接机,超声波焊接模具工装-德召尼克(常州)焊接科技有限公司 | 长城人品牌官网| 超声波焊接机_超音波熔接机_超声波塑焊机十大品牌_塑料超声波焊接设备厂家 | 期货软件-专业期货分析软件下载-云智赢| 运动木地板价格,篮球馆体育运动木地板生产厂家_欧氏地板 | 中国产业发展研究网 - 提供行业研究报告 可行性研究报告 投资咨询 市场调研服务 | 飞行者联盟-飞机模拟机_无人机_低空经济_航空技术交流平台 | 耐磨陶瓷,耐磨陶瓷管道_厂家-淄博拓创陶瓷科技 | 精益专家 - 设备管理软件|HSE管理系统|设备管理系统|EHS安全管理系统 | 二手回收公司_销毁处理公司_设备回收公司-找回收信息网 | YJLV22铝芯铠装电缆-MYPTJ矿用高压橡套电缆-天津市电缆总厂 | 山东彩钢板房,山东彩钢活动房,临沂彩钢房-临沂市贵通钢结构工程有限公司 | 广东燎了网络科技有限公司官网-网站建设-珠海网络推广-高端营销型外贸网站建设-珠海专业h5建站公司「了了网」 | 昆明网络公司|云南网络公司|昆明网站建设公司|昆明网页设计|云南网站制作|新媒体运营公司|APP开发|小程序研发|尽在昆明奥远科技有限公司 | 食品质构分析仪-氧化诱导分析仪-瞬态法导热系数仪|热冰百科 | 科昊仪器超纯水机系统-可成气相液氮罐-美菱超低温冰箱-西安昊兴生物科技有限公司 | 新能源汽车教学设备厂家报价[汽车教学设备运营18年]-恒信教具 | 微型驱动系统解决方案-深圳市兆威机电股份有限公司 | 网架支座@球铰支座@钢结构支座@成品支座厂家@万向滑动支座_桥兴工程橡胶有限公司 | 振动时效_振动时效仪_超声波冲击设备-济南驰奥机电设备有限公司 北京宣传片拍摄_产品宣传片拍摄_宣传片制作公司-现像传媒 | 车间除尘设备,VOCs废气处理,工业涂装流水线,伸缩式喷漆房,自动喷砂房,沸石转轮浓缩吸附,机器人喷粉线-山东创杰智慧 | 多功能真空滤油机_润滑油全自动滤油机_高效真空滤油机价格-重庆润华通驰 | 打包箱房_集成房屋-山东佳一集成房屋有限公司 | 世界箱包品牌十大排名,女包小众轻奢品牌推荐200元左右,男包十大奢侈品牌排行榜双肩,学生拉杆箱什么品牌好质量好 - Gouwu3.com | 重庆监控_电子围栏设备安装公司_门禁停车场管理系统-劲浪科技公司 | 不锈钢复合板厂家_钛钢复合板批发_铜铝复合板供应-威海泓方金属复合材料股份有限公司 | 振动时效_振动时效仪_超声波冲击设备-济南驰奥机电设备有限公司 北京宣传片拍摄_产品宣传片拍摄_宣传片制作公司-现像传媒 | 专业生产动态配料系统_饲料配料系统_化肥配料系统等配料系统-郑州鑫晟重工机械有限公司 | 酒糟烘干机-豆渣烘干机-薯渣烘干机-糟渣烘干设备厂家-焦作市真节能环保设备科技有限公司 | 礼堂椅厂家|佛山市艺典家具有限公司 | 杭州中央空调维修_冷却塔/新风机柜/热水器/锅炉除垢清洗_除垢剂_风机盘管_冷凝器清洗-杭州亿诺能源有限公司 | 100_150_200_250_300_350_400公斤压力空气压缩机-舰艇航天配套厂家 | 网架支座@球铰支座@钢结构支座@成品支座厂家@万向滑动支座_桥兴工程橡胶有限公司 | 媒介云-全网整合营销_成都新闻媒体发稿_软文发布平台 |