在vue中使用cookie記住用戶上次選擇的實(shí)例(本次例子中為下拉框)
最近工作中碰到一個(gè)需求,添加一條數(shù)據(jù)時(shí),自動(dòng)記住上次選擇的下拉框的數(shù)據(jù),剛開始覺得沒思路,后來請(qǐng)教了項(xiàng)目組長,組長直接一句,這不很簡單吧,直接用cookie,我:.......
好吧,都王的差不多了,于是經(jīng)過一番百度實(shí)踐,測試,總算是可以了,接下來就說說實(shí)踐以及一些坑!
開發(fā)環(huán)境: webpack+vue+java后臺(tái)
要實(shí)現(xiàn)這個(gè)小功能,其實(shí)只需要在vue中寫相應(yīng)的功能就可以了,并不需要在后臺(tái)寫什么,但是如果寫的不正確,后臺(tái)也是會(huì)報(bào)錯(cuò)的,代碼如下:
先把這幾個(gè)方法寫上,刪除的看需求決定需不需要:
//設(shè)置cookie setCookie(projectId,exdays) { var exdate=new Date();//獲取時(shí)間 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('=');//再次切割 //判斷查找相對(duì)應(yīng)的值 if(arr2[0]=='projectId'){ me.workhourData.projectId=arr2[1];//保存到保存數(shù)據(jù)的地方 } } } }, //清除cookie clearCookie:function () { this.setCookie("","",-1);//修改2值都為空,天數(shù)為負(fù)1天就好了 },
我這里是只需要一個(gè)projectId即可,實(shí)際中可以根據(jù)具體需求設(shè)置,
注意,這里有個(gè)坑,那就是中文,如果你需要存儲(chǔ)中文cookie,而不進(jìn)行任何處理的話,那么后臺(tái)是會(huì)報(bào)錯(cuò)的,
java.lang.IllegalArgumentException: Control character in cookie value or attribute
這個(gè)錯(cuò)誤一般是中文編碼引起的,中文采用的是Unicode編碼,而英文采用的是ASCII編碼,當(dāng)Cookie保存中文的時(shí)候需要對(duì)中文進(jìn)行編碼,而且從Cookie中取出內(nèi)容的時(shí)候也要進(jìn)行解碼,所以必須特殊處理
escape(value) 編碼
cookievalue=unescape(value); 解碼
百度有恨多中方法,這里不多說!
然后就是在頁面每一次加載的時(shí)候去調(diào)用this.getCookie()方法就可以了,
還要記住一點(diǎn)是,保存的時(shí)候也要設(shè)置cookie,這樣才會(huì)生效,還有就是時(shí)間問題了,根據(jù)具體需求傳參即可!
最后需要說的時(shí),如果一旦報(bào)錯(cuò)或者不想要cookie了,可以手動(dòng)清楚瀏覽器cookie!,這是最快的方式:
補(bǔ)充知識(shí):vue 前后端分離調(diào)用后端數(shù)據(jù)(加深記憶)
1、在.vue文件中引入調(diào)用對(duì)應(yīng)后臺(tái)數(shù)據(jù)方法,并調(diào)用此方法
import {getAccount} from '../assets/js/index'
2、前端申請(qǐng)后臺(tái)數(shù)據(jù)(安裝axios依賴)
//上方引入的index.js import 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.js export const baseUrl='http://shagua.com'; //base.js import axios from 'axios'; import qs from 'qs'; import router from '../../router' axios.defaults.withCredentials=true; //允許跨域發(fā)送cookie axios.defaults.transformRequest = [function(data) { //解析post數(shù)據(jù) if(typeof data=='object'){ return qs.stringify(data); }else{ return data; } }]; axios.defaults.transformResponse=[function(data){ //攔截response請(qǐng)求,做統(tǒng)一跳轉(zhuǎn) data=JSON.parse(data); if(data.status=='-99'){ router.push({path:'/login'}); } return data; }];
3、后端接收前端申請(qǐng)并返回?cái)?shù)據(jù)(此處使用tp5,這里是允許訪問,后臺(tái)業(yè)務(wù)去對(duì)應(yīng)調(diào)用的方法里寫)
//跨域訪問的時(shí)候才會(huì)存在此字段 $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)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- Vue下拉選擇框Select組件使用詳解(一)
- ant design vue中日期選擇框混合時(shí)間選擇器的用法說明
- Vue表單綁定的實(shí)例代碼(單選按鈕,選擇框(單選時(shí),多選時(shí),用 v-for 渲染的動(dòng)態(tài)選項(xiàng))
- 在vue中實(shí)現(xiàn)點(diǎn)擊選擇框阻止彈出層消失的方法
- vue select選擇框數(shù)據(jù)變化監(jiān)聽方法
- vuejs實(shí)現(xiàn)下拉框菜單選擇
- vue Treeselect下拉樹只能選擇第N級(jí)元素實(shí)現(xiàn)代碼
- vue操作下拉選擇器獲取選擇的數(shù)據(jù)的id方法
- vue省市區(qū)三聯(lián)動(dòng)下拉選擇組件的實(shí)現(xiàn)
- Vue下拉選擇框Select組件使用詳解(二)
相關(guān)文章
vue實(shí)現(xiàn)數(shù)字+英文字母組合鍵盤功能
這篇文章主要介紹了vue實(shí)現(xiàn)數(shù)字+英文字母組合鍵盤功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性詳解
這篇文章主要介紹了Vue+ElementUI表格狀態(tài)區(qū)分,row-class-name屬性,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08vue移動(dòng)端UI框架實(shí)現(xiàn)QQ側(cè)邊菜單組件
這篇文章主要介紹了vue移動(dòng)端UI框架實(shí)現(xiàn)仿qq側(cè)邊菜單組件,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-03-03vue中使用echarts并根據(jù)選擇條件動(dòng)態(tài)展示echarts圖表
雖然老早就看過很多echarts的例子, 但自己接觸的項(xiàng)目中一直都沒有真正用到過,直到最近才開始真正使用,下面這篇文章主要給大家介紹了關(guān)于vue中使用echarts并根據(jù)選擇條件動(dòng)態(tài)展示echarts圖表的相關(guān)資料,需要的朋友可以參考下2023-12-12Vue 頁面切換效果之 BubbleTransition(推薦)
使用 vue,vue-router,animejs 來講解如何實(shí)現(xiàn)vue頁面切換效果之 BubbleTransition,需要的朋友參考下吧2018-04-04web開發(fā)中如何優(yōu)雅的解決"重復(fù)請(qǐng)求"問題
在我們的日常開發(fā)當(dāng)中,很多時(shí)候會(huì)出現(xiàn)短時(shí)間內(nèi)重復(fù)請(qǐng)求的情況,如果沒有妥當(dāng)?shù)靥幚砗蠊車?yán)重,這篇文章主要給大家介紹了關(guān)于web開發(fā)中如何優(yōu)雅的解決重復(fù)請(qǐng)求問題的相關(guān)資料,需要的朋友可以參考下2022-05-05Vue開發(fā)之watch監(jiān)聽數(shù)組、對(duì)象、變量操作分析
這篇文章主要介紹了Vue開發(fā)之watch監(jiān)聽數(shù)組、對(duì)象、變量操作,結(jié)合實(shí)例形式分析了vue.js使用Watch針對(duì)數(shù)組、對(duì)象、變量監(jiān)聽相關(guān)操作技巧,需要的朋友可以參考下2019-04-04