タブごとにフォーム内容を記憶したい

Question

現状のシステムではウェブアプリケーションでフォーム入力を記憶するために
JS（jQuery) で sessionStrage に状態を保存して
ページ表示時に呼び出してフォームにセットするということをしているみたいです

ブラウザで別タブを開いてフォーム内容を変更して表示した後
元のタブに戻って再読み込みや戻るを行った際にタブごとにフォーム内容を記憶するようにしたいという要望があるのですが、
どうすれば実現可能でしょうか

同一セッションで新規アクセスと再読み込みや戻るでのアクセスを区別する方法はありますか？
区別できればサーバー側で何かIDを埋め込んで sessionStrage に ID ごとのタグを保存すれば良さそうなのですが

システムは Rails プラットフォームで動作していますが
現状ページ遷移はせずに画面遷移はほぼ view 内の JS の ajax のみで完結している感じです

Answer 1

タブごとに保存する内容を変えたいということでしたらページ読み込み時にUUIDなどで一意のIDを作成して、そのIDをキーにsession storage にデータを保存するというやり方ではいかがでしょうか？
ただしsession storage の場合セッションが切れたタイミングで保存した内容も消えてしまいますが。

【追記】
すいません。UUIDのことは忘れてください。使わなくても大丈夫です。
タブを閉じたときに保存データが消えてもいいという前提ですが、
初回読み込み時、フォームの内容を入力したタイミングでsession storageにデータを保存。
戻るボタンやリロード時にsettion storageにデータがあるかを確認して
あればフォームに内容を反映させればいいと思います。

タブごとに保存したいということなので新しいタブで同じURLを見たときはデータ反映する必要はないですよね？

Comments

[退会済みユーザー]

クライアント側で生成してもいいんですか
いずれにしろどこに埋め込んで参照すればタブごとにユニークになるのかわからないんですよね
タブを開いた時と再読み込みや戻るで同じURLにアクセスした時をどうやって区別すればいいのでしょうか

[keisukeh]

回答に追記しましたのでご確認ください。

[退会済みユーザー]

>初回読み込み時
>戻るボタンやリロード時
を具体的にどう書けばいいのでしょうか
１つ目のタブを開いてリロードした場合と２つ目のタブを開いた場合で処理を分ける方法がわからないのです

[keisukeh]

処理を分ける必要はないです。settion storageはタブごとに違いますので　タブAのsettion storageとタブBのsettion storageは別物です。

[退会済みユーザー]

そうだったのですね

セッションはタブ間で共通している(ログイン状態は維持されたまま)と思ってたので
sessionStrage にデータがあるかどうかだけを見ても区別できないと思っていたのですが

sessionStrage というのはタブごとに勝手に別になってくれるんですね

それならコーディングに入れそうです
ありがとうございました

[namda]

ぱっと思いつくのは `history.replaceState()` や `history.repalceState` などでURLのパラメータにuuid追記する方法ですね。
実機検証して無いですが、リアルタイムにurl書き換えして、戻る進む、リロード時も値を保持してくれると思います。
またサーバ側は読まなくてよく、そのurlパラメータを見てローカルストレージにSession+uuidで保存読み出しなどどうでしょう

[退会済みユーザー]

まだコーディング途中なのですが sessionStrage 自体がタブごとに別なのであればIDをつけたりは必要ない気がします
もしタブ間で共通だったり、セッションが閉じてもデータを残したい localStrage 使うケースが出て来たらそういう方法で戻るリロードを検出する必要もあるかもしれないですね