sessionStorageを調べています。

解決済

質問者：hayosato
質問日時：2023/06/20 12:41
回答数：1件

入力フォームに入力された値をsubmitを押したら、次の確認画面から前のページに戻った時も、入力されているデータを保持するコード書いています。
以下は調べたコードですが、コードの意味は大まかに把握できていますが、sessionStorageにデータを保存するまでの流れを正確に理解できていません。

<script>タグ内に▼三角の記号部分のコードはsesstionStorageにデータを保存するために、この場合▼の部分のコードは必要なのでしょうか？

また、♦の部分を指定するには、まず最初に、■の部分のコードを書かなければいけないという解釈であっていますでしょうか？

※PHPはを使った方がよいですが、今は練習なので、使っていません。

---HTMLのコード---

<body>
<form action="form1.php" method="post" id="form">

名前：<input type="text" class="form1" name="name" id="name" value="" />
ふりがな：<input type="text" class="form1" name="furigana" id="furigana" value="" />

選択：
<select id="fruits" class="select1" name="fruits">
<option value="">果物を選択する</option>
<option value="">リンゴ</option>
</select>
<button id="submit" class="yohaku">
</button>
</form>
</body>

---javascriptのコード---

<script>
▼const key = 'date_key';
▼const form = document.querySelector('#form');
▼const name = document.querySelector('#name');
▼const furigana = document.querySelector('#furigana');

form.addEventListener('change', function() {

♦if (name.value != "") sessionStorage.setItem('name', name.value);
♦if (furigana.value != "") sessionStorage.setItem('furigana', furigana.value);
♦if (fruits.value != "") sessionStorage.setItem('fruits', fruits.value);
});

let val1 = sessionStorage.getItem('fruits');
if(val1!== null)fruits.value = val1;

■name.value = sessionStorage.getItem('name');
■furigana.value = sessionStorage.getItem('furigana');
</script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2023/06/20 15:30

こんにちは

javascriptは基本的に Document 上で動作していますので、表示ページが遷移すると（異なるDocumentになるので）変数等に値を保持しておくことができません。
これに対して、値を保持しておける一時的な記憶スペース（＝sessionStorage）に値を記録しておこうというのがご提示のスクリプトの仕組みです。
https://developer.mozilla.org/ja/docs/Web/API/Wi …

＞sessionStorageにデータを保存するまでの流れを正確に理解できていません。
直接的には、
　sessionStorage.setItem(key. value);
で値を記録し、
　sessionStorage.getItem(key);
で読み出すという方法になっています。

＞データを保存するために、この場合▼の部分のコードは必要なのでしょうか？
「保存」に関して言えば、直接は必要ありませんけれど、値を保存する前にフォームの値を読み取る必要があり、そのためにDOM要素を取得しているので、全体の処理としては必要です。
ただし、
＞const key = 'date_key';
は、値を使用しておらず、あっても無くても変わりありませんので、ご提示の範囲においては不要と言えます。

＞この場合▼の部分のコードは必要なのでしょうか？
上に書きましたように、ストレージに値を書き込む処理です。
（これが無ければ、書き込みません ⇒ 次に読出したくても読込むことができなくなります）

＞まず最初に、■の部分のコードを書かなければいけないという解釈であっていますでしょうか？
ご提示のままの記述順序で動作していると思いますけれど・・・？？
（ですので、最初に書かなければいけないということではない）
一方で、処理の流れとしては、ページを読み込んだ際に「ストレージをチェックして（値が保管されていれば）表示する」という処理を行う必要はありますけれど。

＞流れを正確に理解できていません。
漠然とした理解では、まともに動作するスクリプトにはまずなりません。
きちんと理解できるようになさってください。

＞入力されているデータを保持するコード書いています。
「書いている」のなら、理解しなくては書けないはずですけれど？？