溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue中使用cookie實現(xiàn)記住用戶上一次的選擇

發(fā)布時間:2020-11-03 16:52:53 來源:億速云 閱讀:298 作者:Leah 欄目:開發(fā)技術(shù)

vue中使用cookie實現(xiàn)記住用戶上一次的選擇?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。

//設(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ù)為負1天就好了
    },

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

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

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

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

escape(value) 編碼

cookievalue=unescape(value); 解碼

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

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

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

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

vue中使用cookie實現(xiàn)記住用戶上一次的選擇

補充知識: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.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請求,做統(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']) &#63; $_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');
}

看完上述內(nèi)容是否對您有幫助呢?如果還想對相關(guān)知識有進一步的了解或閱讀更多相關(guān)文章,請關(guān)注億速云行業(yè)資訊頻道,感謝您對億速云的支持。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI