社会人から始めたプログラミング

プログラミング、エンジニアに関することでの備忘録、シェアしたい情報などを共有するためのブログです。

toastrをアプリケーション(ページ)を超えて表示する

ログイン期限切れで、「ログインしてください」のtoastrをページ遷移する前とした後に継続して表示したかった。

しかし、今作成しているアプリケーションは、ページ遷移前と遷移後で、アプリケーションが切り替わるので、
トースターを継続して表示できなかった。

そこで、
ページ遷移後だけにtoastrを表示するようにした。
その時の選択肢は2つ。

1)URLのパラメータとして渡すか
2)ウェブブラウザのlocalstorageに渡す


1)の場合、はURLにパラメータが含まれるので、再現しやすい方法となる。
例えば、ユーザーにURLを教えてもらえば、動きの確認が開発サイドでもすぐに確認できる。

2)の場合、URLには文字数制限があるので、
大きな容量のものを渡す場合には2)のやり方が良さそう。

今回は特に大きな容量のものを渡すわけではなかったので、
1)の方法で実装。

ということで、

まず、ページ遷移前のフロント側のURLを生成するjavascriptにパラメータをもたせるようにし、
(URLの末尾にある?xxx=zzzみたいなやつです)

次に、URLパラメータに指定した値が入っているかを
遷移後のページで取得するようにし、
値があればtoastrを表示するようにしました。

javascriptでURLからパラメータの値を取得する方法こちらを参照してください。
stackoverflow.com