ラジオボタンのチェック状態をリロード後も保持したい

Question

ECサイトの送付先選択画面にて下記のようなラジオボタンを用意しています。

<div class="info addr_info">
	<h2>お届け先の入力</h2>
	<ul  class="addr_choice radio_list">
		<li>
			<label id="optionLbl01">
				<input type="radio" name="receiver_user_type" id="receiver_user_type_X" value="X" onclick="copydata()">
				<span class="radioLabel">注文者の住所にお届けする</span>
			</label>
		</li>
		<li>
			<label id="optionLbl01">
				<input type="radio" name="receiver_user_type" id="receiver_user_type_E" value="E" onclick="javscript:copydata();showReceiverForm();">
				<span class="radioLabel">注文者の情報を元にお届け先を編集する</span>
			</label>
		</li>
		<li>
			<label id="optionLbl01">
				<input type="radio" name="receiver_user_type" id="receiver_user_type_N" value="N" onclick="addrclick()">
				<span class="radioLabel">新しいお届け先を入力する</span>
			</label>
		</li>
	</ul>
</div>

##実現したいこと

下二つの選択肢をチェックすると送付先入力フォームが表示され、編集・新規入力ができるようになっています。
入力した情報がエラーのまま次の画面に進もうとすると、バリデーションでこのページにリダイレクトするようにしたいのですが、その際ラジオボタンのチェック状態を維持したままリダイレクトさせたいです。
（フォームを表示したままの状態でリダイレクトさせたいいため）

##試したこと
本サイトに同様の質問があったのでこちらのlocalStrageを使ってチェックボタンの値を保持しようとしたのですがうまくいきませんでした。

下記はラジオボタンが配置されているhtmlに記述したコードです。

<script>
	window.addEventListener('DOMContentLoaded', function (e) {
		var status=localStorage.getItem('status');
		console.log(status);
		if(x=document.querySelector('[name=receiver_user_type][value='+status+']')) x.checked=true;
		[].forEach.call(document.querySelectorAll('[name=receiver_user_type]'),function(x){
			x.addEventListener('change',function(e){
				localStorage.setItem('status',e.target.value);
				console.log(e.target.value);
			});
		});
	});
</script>

コンソールとデベロッパーツールで取れている値を確認してみたのですが、リロード時にそれまで保持していた値がリセットされたような動きになりました。

リロードしても保存できる方法についてご教示いただけると大変助かります。

よろしくお願いいたします。

2019/02/20追記
ユーザー関数を記述しているjsファイルの内容を記載します。

function copydata() {
	var copydata_value = "";
	for(i=0;i<document.form1.receiver_user_type.length;i++){
		if(document.form1.receiver_user_type[i].checked == true){
				copydata_value = document.form1.receiver_user_type[i].value;
		}
	}
	if (copydata_value == 'X' || copydata_value == 'E') {
		document.form1.receiver.value=document.form1.sender.value;
		document.form1.receiver_kana.value=document.form1.sender_kana.value;

		document.form1.receiver_office_name.value = document.form1.office_name.value;
		document.form1.receiver_office_name_kana.value = document.form1.office_name_kana.value;
		document.form1.receiver_office_dept_name.value = document.form1.office_dept_name.value;
		
		document.form1.emergency2_1.value=document.form1.emergency1_1.value;
		document.form1.emergency2_2.value=document.form1.emergency1_2.value;
		document.form1.emergency2_3.value=document.form1.emergency1_3.value;

		document.form1.post1.value=document.form1.sender_post1.value;
		document.form1.post2.value=document.form1.sender_post2.value;
		changeReceiverArea(document.form1.sender_area.value);
		document.form1.address.value=document.form1.sender_addr.value;
		document.form1.address2.value=document.form1.sender_addr2.value;
	}else {
		document.form1.receiver.value="";
		document.form1.receiver_kana.value="";
		document.form1.receiver_office_name.value = '';
		document.form1.receiver_office_name_kana.value = '';
		document.form1.receiver_office_dept_name.value = '';
		set_null_emergency(2);
		// set_null_emergency(3);
		document.form1.post1.value="";
		document.form1.post2.value="";
		changeReceiverArea(0);
		document.form1.address.value="";
		document.form1.address2.value="";
	}
}

function addrclick() {
	var addrclick_value = "";
	for(i=0;i<document.form1.receiver_user_type.length;i++){
		if(document.form1.receiver_user_type[i].checked == true){
			addrclick_value = document.form1.receiver_user_type[i].value;
		}
	}

	if (addrclick_value == "A") {
		// $('.js_modal').fadeIn();
		document.form1.receiver.value = "";
		document.form1.receiver_kana.value = "";
		set_null_emergency(2);
		document.form1.address.value = "";
		document.form1.address2.value = "";
		changeReceiverArea(0);
		document.form1.post1.value = "";
		document.form1.post2.value = "";
		
		return false;
	} else {
		document.form1.receiver.value = "";
		document.form1.receiver_kana.value = "";
		set_null_emergency(2);
		document.form1.address.value = "";
		document.form1.address2.value = "";
		changeReceiverArea(0);
		document.form1.post1.value = "";
		document.form1.post2.value = "";
	}

	document.form1.receiver_office_name.value = '';
	document.form1.receiver_office_name_kana.value = '';
	document.form1.receiver_office_dept_name.value = '';
}

function showReceiverForm() {
	jQuery('.receiver_address').show();
}

jQuery(function(){
	jQuery('input[name="receiver_user_type"]').click(function(){
		if(this.value == 'X'){
			jQuery('.receiver_address').hide();
		}else{
			jQuery('.receiver_address').show();
		}
	});

	jQuery('#receiver_user_type_X').trigger('click');
		jQuery.fn.autoKana('#sender_name', '#sender_kana', {katakana : true});
		jQuery.fn.autoKana('#receiver_name', '#receiver_kana', {katakana : true});
		jQuery.fn.autoKana('#sender_office_name', '#sender_office_name_kana', {katakana : true});
		jQuery.fn.autoKana('#receiver_office_name', '#receiver_office_name_kana', {katakana : true});
});

Comments

[hoshi-takanori]

それはリロード時の状態保持ではなく、画面遷移時の状態引き継ぎですね。ちなみに、「次の画面に進む」というのはどのように実装されてますか？

[m.ts10806]

copydata() ,showReceiverForm(),addrclick()の実装は今回の要件のみを達成したいと考えたときに必要でしょうか。必要でしたらコードをご提示ください。

[GenkiSugiyama]

hoshi-takanori 様
次の画面に進むは、上記gifのはじめの方に画面下に表示されている「次へ」ボタンが押されるとsubmitされる仕組みになっています。

[GenkiSugiyama]

m.ts10806 様
ユーザー関数のコードを追記いたしました。

Answer 1

X で再設定しています……

    jQuery('#receiver_user_type_X').trigger('click');

Comments

[GenkiSugiyama]

ご指摘ありがとうございます。この処理をコメントアウトし試してみたら上手く動きました！
コードの見落としに気づかず、、、大変助かりました！

Answer 2

おそらく仕組みとしてはできているはず
タグにonclickで付加されたユーザー関数がなにか
おかしなことをしているのだと思います

Comments

[GenkiSugiyama]

yambejp 様
ご回答ありがとうございます！
ユーザー関数のコードも追加したのでご確認いただけるとありがたいです。

[yambejp]

よくわからないけどHTML消しました？

[GenkiSugiyama]

修正時、一度文字数オーバーしてしまったので最初に記載していたコードまで削除してしまっていました。
先ほど消してしまったコードを再度掲載しました。