javaScriptでページ遷移前にsessionStorageの中身を消したいです

Question

前提・実現したいこと

Web StorageのLocalStorageを利用しています。
あるボタンを押すと、保存されているStorageの内容を消してからページ遷移させたいです。
前提として、LocalStorageにデータの保存は出来ています。

現在実装しているコード

var local_storage = sessionStorage;

//値をセット
local_storage.setItem('pre_test', 'test01');//この値は消したい
local_storage.setItem('pre_value', 'value01');//この値は消したい
local_storage.setItem('b_test', 'b_test_value');//この値は消したくない

//Storageの削除関数
function clear_storage(){
  alert('削除開始');//テスト用にアラートを出します。
  for(var i = (local_storage.length - 1); i >= 0; i--){//ループの方法を変更しました。
    var key = local_storage.key(i);
    if(key.match('pre')){//該当するkeyだけ消したいのでif文判定しています
      local_storage.removeItem(key);
    }
  }
}

//ボタンを押されたら、Storageを消してからページ遷移
$('#test_button').on('click', function(){
  clear_storage();
  location.href = '/other_page.php';
});

###現状
id = test_buttonの箇所をクリックしても、Storageの削除が行われません。
また、テスト用のアラートも出ません。それらを実行せずにページ遷移が行われています。

ページ遷移前に処理を行いたいです。
以下の様な指摘でも構いません。

・そもそもStorageの消し方が間違っている
・ページ遷移前になんらかの処理はできない

お手数ですが、回答よろしくお願いいたします。

Comments

[defghi1977]

リダイレクトじゃなくて単なるページ遷移じゃね？ https://ja.wikipedia.org/wiki/%E3%83%AA%E3%83%80%E3%82%A4%E3%83%AC%E3%82%AF%E3%83%88_(HTTP)

[m.ts10806]

この記述で削除できていないということでしょうか？sessionstorageに保管している情報のサンプルも追記していただけますか？

[defghi1977]

これ、もう少し詳しく説明して下さい. key.match('pre')ってことは「文字列preが含まれているキーに対応する値全てを削除する」様に見えますが、一切それに関する記述がありません.

[t_hoshizaki]

defghi1977さん　ご指摘の通りリダイレクトでなくページ遷移です。ありがとうございます。また、まさに「文字列preが含まれているキーに対応する値全てを削除する」がしたいことです。

[t_hoshizaki]

mts10806さん　この記述で削除できておらず、ページ遷移後も残ってしまっています。また指摘していただいた、保管している情報のサンプルを追記しました。

[m.ts10806]

removeItem()をコメントアウトしたらmatch==trueでpre含むキー2つが入ってくるみたいですね。そこが問題かもしれません。

Answer 1

ループカウンタのiを0からインクリメントしているため removeItemを呼び出す毎にlength値が減り, ループ内の実行回数がずれています.

//Storageの削除関数
function clear_storage(){
  //↓(2)ここのlength値が一個減ってしまうつまりループ数が足りなくなる.
  for(var i = 0; local_storage.length; i++){
    var key = local_storage.key(i);
    if(key.match('pre')){//該当するkeyだけ消したいのでif文判定しています
      local_storage.removeItem(key);//←(1)これを実行すると
    }
  }
}

こういった場合は, ループカウンタをlength値からデクリメントするようにすると辻褄が合います.

"use strict";
{
	const st = window.sessionStorage;
	st.setItem("pre0", "a");
	st.setItem("any0", "b");
	st.setItem("pre1", "c");
	st.setItem("any1", "d");
	console.log(st.length);

	for(let i = st.length - 1; i >= 0; i--){
		const key = st.key(i);
		if(key.match(/^pre/)){
			st.removeItem(key);
		}
	}
	console.log(st.length);
	console.log("pre0", st.getItem("pre0"));
	console.log("any0", st.getItem("any0"));
	console.log("pre1", st.getItem("pre1"));
	console.log("any1", st.getItem("any1"));
}

実行結果

4
2
pre0 null
any0 b
pre1 null
any1 d

Comments

[t_hoshizaki]

defghi1977さん
回答ありがとうございます。
まずはご指摘いただいた通り、for文を修正しました。
しかしこれでは『ボタンを押した後、削除してからページ遷移』がまだ出来ていません。
度々で申し訳ありませんが、助言頂ければ助かります。

[defghi1977]

> また、テスト用のアラートも出ません。それらを実行せずにページ遷移が行われています。
なら、問題はここじゃないよ？
（別にlocation.hrefを弄っている場所があるのでは？）

[t_hoshizaki]

defghi1977さん
重ね重ねありがとうございます。ここ以外でlocation.hrefの記述はありません。
location.hrefの前に関数を呼び出して終了後にページ遷移は不可能ということでしょうか・・・

[defghi1977]

あなたのコードそのものはこちらでは動いているのです. ですからこれ以外に原因があるとしか考えられません. そのため, HTML部の提示もお願いいたします.

[t_hoshizaki]

defghi1977さん
非常に申し訳ありません、関数を呼び出すときの名前を間違えていたのが原因でした。
従って、指摘していただいたfor文の時点で解決しておりました。
このようなミスのせいでお時間を取らせてしまいすみません。
以後、投稿する前に確認します。

[defghi1977]

おつかれさまです. バグ潰しはあらゆる可能性を疑う必要があるから、一つ一つ虱潰しにせんとね