sessionStorageで配列を受け取る場合

Question

js初心者です。
セッションでボタンを押した状況を記憶さえて
移動した場合再現するコードを組んでいます。

//送る側
$(function(){
			 $('form[name="form_main"]').submit(function() {
						  var s_btn_arr=[];
						  var s_cnt=0;


				 $(".s_btn").each(function(i) {
					 if($(this).children("i").hasClass("fa-minus")) {
						 s_btn_arr.push(i);
					    }
					 s_cnt++;
				 });

				 var storage = sessionStorage;
				 storage.setItem('s_btn_arr', s_btn_arr);
				 storage.setItem('s_cnt', s_cnt);
				 });
		});

//受け取る側
			$(function(){
					 var storage = sessionStorage;
					 storage.getItem('s_btn_arr');
					 storage.getItem('s_cnt');
					if(storage.getItem('s_btn_arr')){
						var s_btn_arr = [];
						 s_btn_arr = storage.getItem('s_btn_arr');
					}
					if(storage.getItem('s_cnt')){
						var s_cnt = storage.getItem('s_cnt');
					}


			 	    alert(s_btn_arr);

					if(s_btn_arr){
			 		for (var i=0; i<s_cnt; i++){
			 			if (s_btn_arr.indexOf(i) >= 0) {
		 						$(".open_btn").eq(i).trigger("click");
		 						alert(i);  //結果
							 }};
					}
			//	 });
			 });

s_btn_arrが10,11が入ると
結果が
0
1
10
11
になってしまいます。
本当は
10
11
になるようにしたいのですがどうしたらいいでしょうか？
丸投げで申し訳ないですがよろしくお願いいたします。

Comments

[kei344]

https://teratail.com/questions/79575 こちらの質問を一旦「解決済み」にされてはいかがでしょうか。

[rainbowsix]

失礼いたしました。解決済にしました。

Answer 1

0,1はforの中のalertですね。
forでカウンタで++していっているiをalertしているため出力されています。
しいてならalert(s_btn_arr[i]);でおそらく10、11と出力されるのではと思います。

あと、JSONを使った方がやりやすいかなぁと思います。
ざっくり作ってみたサンプルソースで申し訳ないですが、ヒントとして参考・活用してください。

	<button class="on-btn" type="button">ON</button>
	<button class="get-btn" type="button">GET</button>
	<button class="reset-btn" type="button">RESET</button>

	<script src="./jquery.js"></script>
	<script>
		var storage = sessionStorage;
		//送る側
		$(function() {
			$('.on-btn').on("click", function() {
				var s_btn_arr = [];
				var s_cnt = 0;
				s_btn_arr.push(10);
				s_btn_arr.push(11);
				storage.setItem('s_btn_arr', JSON.stringify(s_btn_arr)); //JSON文字列に変換
			});
		});

		//受け取る側
		$(function() {
			$('.get-btn').on("click", function() {
				btntext = storage.getItem('s_btn_arr');
				if (btntext != "" && btntext != null) { //何も保存されないときはnullなのでこちらでチェック
					btnarr = JSON.parse(btntext); //JSON文字列を配列に
					//取り出し
					for (i = 0; i < btnarr.length; i++) {
						alert(btnarr[i]);
					}

				}
			});
		});
		//削除
		$(function() {
			$('.reset-btn').on("click", function() {
				storage.removeItem('s_btn_arr');
			});
		});
	</script>

HTMLがどのようになっているか分からないので、ひとまず固定で10と11を配列に入れてJSONにしてsessionStorageに保存し、
受け取る側ではパースして配列に戻してforしました。
これで「10、11」が出るようになっています。
なおs_cntはあくまで配列の件数となり、配列.lengthで件数とれるのでsessionStorageに保存していません。

Comments

[rainbowsix]

ありがとうございます。ジャストでした！