vueでは、クッキーを使用して、ユーザが最後に選択したインスタンスを記憶する（この例では、ドロップダウン枠）。

最近の仕事で必要なものに出会って、データを追加する時、自動的に前回選択したプルダウンフレームのデータを覚えています。最初は構想がないと思いましたが、プロジェクトリーダーに直接教えてもらいました。これは簡単ではないでしょう。直接クッキーを使います。
はい、都王さんはそろそろです。そこで、百度の実践を経て、テストして、やっといいです。今度は実践とピットについて話します。
開発環境：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だけが必要です。実際には具体的なニーズに合わせて設定できます。
注意してください。ここに穴があります。それは中国語です。もし中国語のクッキーを保存したいなら、何の処理もしないでください。バックグラウンドは間違いがあります。
java.lang.IllgalAgment Exception：Control character in cookie value or atribute
このエラーは主に中国語の符号化によるもので、中国語ではUnicoode符号を採用しています。英語ではASCIIコードを採用しています。Cookieは中国語を保存する時は中国語を符号化しなければなりません。またCookieから内容を取り出す時も復号しますので、特別に処理しなければなりません。
エスケープコード
cookievalue=unescape(value)復号
百度は恨みの多い中の方法があって、ここは多く言いません！
そしてページを読み込むたびに、this.get Cookie（）を呼び出す方法でいいです。
もう一つ覚えておきたいのは、保存する時もクッキーを設置しなければなりません。そうすると、有効になります。また、時間の問題です。具体的な需要によって、参参参すればいいです。
最後に言いたいことがありますが、もしエラーが発生したら、クッキーが欲しくなくなりましたら、手動でブラウザクッキーを確認できます。これは一番早い方法です。

補足知識：vue前後端分離呼び出しバックエンドデータ（記憶を深める）
1.vueファイルに対応するバックグラウンドデータメソッドを導入して呼び出します。
import{getAccent}from./asets/js/index'
2、フロントエンド申請楽屋データ（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; //      cookie
axios.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、バックエンドは、フロントエンドアプリケーションを受信し、データに戻る（ここではtp 5を使用して、ここではアクセスを許可し、バックグラウンドサービスは、呼び出しに対応する方法で書き込みます）

//              
$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でクッキーを使って、ユーザーが前回選択したインスタンス（今回の例では下枠）を記憶しています。つまり、小編集が皆さんに共有した内容の全部です。参考にしてほしいです。どうぞよろしくお願いします。