セレクトボックスの連動時、ブラウザバックの際に値が保持されない

実現したいこと

2つのセレクトボックスがあり、
「県名」選択→「県名に応じた市町村名」を表示させる。

発生している問題・分からないこと

一旦は実装できたのですが、ブラウザバックの際に、選択した選択肢（市町村名）が保持されない。

該当のソースコード

Javascript

1window.onload = function () {2 var e, l;3 (l = function (el) {4 var selNo = el.selectedIndex;5 var selObj = document.getElementById("city");6 var optionData = [7 ["選択してください,"],8 ["東京,tokyo", "大阪,osaka", "名古屋,nagoya"],9 ["ニューヨーク,ny", "ロサンゼルス,la"]10 ];11 var i, tmp = [];12 while (selObj.hasChildNodes()) {13 selObj.removeChild(selObj.firstChild);14 }15 for (var i = 0; i < optionData[selNo].length; i++) {16 tmp = optionData[selNo][i].split(",");17 selObj.options[i] = new Option(tmp[0], tmp[1]);18 }19 })(e = document.getElementById("prefecture"));20 e.onchange = function () { l(this); };21}

試したこと・調べたこと

上記の詳細・結果

検索して、下記対応策『javascriptでの2つのプルダウンメニューの初期値』（回答1）を見つけましたが、
この方法だと、例えば
日本→大阪
と選択し、次のページから戻った際に、
日本→東京
となってしまいます。

＜参考サイト＞
https://oshiete.goo.ne.jp/qa/5328597.html

補足

特になし