画面遷移、更新してもセレクトボックスの選択状態を保持したい

Question

前提・実現したいこと

登録画面でセレクトボックスを選択した状態で確認画面に遷移し、そこから「入力に戻る」ボタンでセレクトボックス選択画面に戻った際に先ほど選択した状態を保持したいです。

例）登録画面で「２」を選ぶ→確認画面に遷移→「入力に戻る」ボタン→登録画面に戻る「（「２」を選択状態）
のようにしたいです。

発生している問題・エラーメッセージ

エラーメッセージはありません。

該当のソースコード

//入力に戻る
@RequestMapping(value="/entry/", params= "back=back", method = POST)
	public String back(Model model, EntryBean entry,HttpServletRequest request, SessionStatus sessionStatus) {
		sessionStatus.setComplete();	
		HttpSession session = request.getSession();
		session.setAttribute("entry", entry.getNumber());
		entry.setNumberList(numberList);
		model.addAttribute("entry", entry);
		return "entry/entry";
	}

  var arr = [
    {cd:"1", label:"いち"},
    {cd:"2", label:"に"},
    {cd:"3", label:"さん"},
    {cd:"4", label:"よん"},
    {cd:"5", label:"ご"}
    ]; 
 
  window.onload=function(){
    for(var i=0;i<arr.length;i++){
      let op = document.createElement("option");
      op.value = arr[i].cd;
      op.text = arr[i].label;
      document.getElementById("number").appendChild(op);
    }
  }

//入力に戻る
$(function(){
	$('#btnBack').on('click',function(){
		window.backInput();
		return false;
	})
});
function backInput(){
	$('input[name=back]').val('back');
	$('#entry').attr('action', '/number/entry/');
	$('#entry').submit();
}

//登録画面の入力フォーム
<form:select path="number">
<select id="number"></select>
<span id="hiddenNumber" class="disNon"><c:out value="${entry.numberList}" /></span>
</form:select>

//確認画面の入力に戻るボタン
<li><input type="button" class="btn" id="btnBack" value="入力に戻る"></li>

試したこと

こちらで検索したりして調べましたが解決せず、、

補足情報（FW/ツールのバージョンなど）

JavaScript
Java7
HTML

Comments

[m.ts10806]

「入力に戻る」ボタンのhtmlと制御がわかるコードもご提示ください

[hamuhamukushi]

失礼いたしました。追記いたしました。
よろしくお願いいたします。

[m.ts10806]

あれ？えーっとごめんなさい伝わってなかったか
どうやってそのボタンで戻ってますか？

[hamuhamukushi]

失礼いたしました。
追記したのですがこちらで大丈夫でしょうか、、

Answer 1

クッキーにでも保存しておけばよいのでは？

sample

こんな感じでどうでしょう

<script>
const setCookie=(key,val)=>{
  var tmp = key+"="+encodeURIComponent(val)+";";
  tmp += "expires=Fri, 31-Dec-2030 23:59:59;";
  document.cookie = tmp;
};
const getCookie=key=>{
  var ret=null;
  var params  = document.cookie.split(/; */);
  params.forEach(x=>{
    if(r=x.match(new RegExp("^"+key+"="+"(.*)"))){
      ret=decodeURIComponent(r[1]);
    }
  });
  return ret;
};
const delCookie=key=>{
  expiredate = new Date();
  expiredate.setFullYear(expiredate.getFullYear()-1);
  tmp = key+"=;";
  tmp += "expires="+expiredate.toGMTString();
  document.cookie = tmp;
};
const arr = [
    {cd:"1", label:"いち"},
    {cd:"2", label:"に"},
    {cd:"3", label:"さん"},
    {cd:"4", label:"よん"},
    {cd:"5", label:"ご"},
  ]; 
window.addEventListener('DOMContentLoaded', ()=>{
  const number=document.querySelector("#number");
  arr.forEach(x=>{
    const op=Object.assign(document.createElement("option"),{
    value:x.cd,textContent:x.label});
    number.appendChild(op);
  });
  number.addEventListener('change',e=>{
    setCookie('number',number.value);
  });
  var v=getCookie('number');
  if(v) number.value=v;
});
</script>

<form:select path="number">
<select id="number"></select>
<span id="hiddenNumber" class="disNon"><c:out value="${entry.numberList}" /></span>
</form:select>
<a href="next.html">next</a>

• next.html

<a href="javascript:history.back()">back</a>

Comments

[hamuhamukushi]

ありがとうございます。
クッキーについての知識がなく、、
どのようにして保存したら良いのでしょうか？

Answer 2

window.back();

これだと普通にブラウザバックになってませんか？
おそらくback()メソッドは使われていません。
ブラウザバックだとあくまで履歴から戻ることになるので、リクエスト処理的にセッションなども使われないのではないでしょうか。
POSTして戻った方が良いように思います。

Comments

[hamuhamukushi]

入力に戻る際は一番上のJavaのコードで戻っています。
値はentryに格納できているのですが、セレクトボックスは元に戻ってしまいます、、

[hamuhamukushi]

失礼しました。こちら投稿の際にメソッド名を変えたためこのような表記になってしまいました。
window.back();はブラウザバックではなく、backメソッドを呼び出しています。
backメソッドのメソッド名を修正いたしました。

[m.ts10806]

あいえ。名前の問題じゃなかったんですが。
ちなみに、その戻るボタンを押したときの挙動を確認しましたか？デバッグモードで起動してどこを通ったか確かめてみてください

[hamuhamukushi]

デバックモードで試しましたが一番上のJavaのコードで返っています

[m.ts10806]

なるほど。しかし毎回EntryBeanから拾ってたら中身常に空ですよね。
セッションから拾うならまだわかるのですが。
セッションに情報をセットするタイミング、ゲットするタイミングを見直してみては？