最近工作中碰到一個需求,添加一條數據時,自動記住上次選擇的下拉框的數據,剛開始覺得沒思路,後來請教了項目組長,組長直接一句,這不很簡單吧,直接用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記住用戶上次選擇(本次例子中為下拉框)