入力フォームに入力された値を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>
No.1ベストアンサー
- 回答日時:
こんにちは
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';
は、値を使用しておらず、あっても無くても変わりありませんので、ご提示の範囲においては不要と言えます。
>この場合▼の部分のコードは必要なのでしょうか?
上に書きましたように、ストレージに値を書き込む処理です。
(これが無ければ、書き込みません ⇒ 次に読出したくても読込むことができなくなります)
>まず最初に、■の部分のコードを書かなければいけないという解釈であっていますでしょうか?
ご提示のままの記述順序で動作していると思いますけれど・・・??
(ですので、最初に書かなければいけないということではない)
一方で、処理の流れとしては、ページを読み込んだ際に「ストレージをチェックして(値が保管されていれば)表示する」という処理を行う必要はありますけれど。
>流れを正確に理解できていません。
漠然とした理解では、まともに動作するスクリプトにはまずなりません。
きちんと理解できるようになさってください。
>入力されているデータを保持するコード書いています。
「書いている」のなら、理解しなくては書けないはずですけれど??
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript セレクトを全て選択されていないと、文字によるエラーメッセージを表示させるコードを調べています 2 2023/06/22 15:48
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- PHP 入力した部分を表示させたまま(保持)するにはどうすれば良いでしょうか? 1 2023/01/25 11:14
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
%の計算の仕方
-
value内に変数を入れたい
-
複数のsubmitボタンで押された...
-
演算対象の数字と演算子を入力...
-
セレクトボックスの初期選択状...
-
引数に数値、文字列の混在
-
C言語クイックソートの比較総回...
-
setIntervalの間隔を途中で変更...
-
ダミーフォームの内容を送信用...
-
javascriptでhiddenに二次元配...
-
VB.NET DateTimeの型について
-
3桁区切りのカンマをつけたい...
-
フォームで入力した値を別のフ...
-
ループで連続したフォームの値...
-
マクロ オブジェクト変数With...
-
HTML ローカルストレージへの保存
-
javaで name=id[?] を指定...
-
javascriptにてHTMLのhiddenエ...
-
日付選択のポップアップを今日...
-
javaスクリプトで、テーブルの...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
hiddenのvalueの値を変えたい
-
value内に変数を入れたい
-
引数に数値、文字列の混在
-
複数のsubmitボタンで押された...
-
VB.NET DateTimeの型について
-
3桁区切りのカンマをつけたい...
-
javascriptでhiddenに二次元配...
-
フォームで入力した値を別のフ...
-
setIntervalの間隔を途中で変更...
-
jsで、配列内の文章を改行する...
-
Pythonで会員サイトの自動ログ...
-
selectboxのoptionタグのvalue...
-
テキストボックスに入力された...
-
フォーカスすると初期値が消去...
-
ラジオボタンと連動して文字列...
-
セレクトボックスの初期選択状...
-
sessionStorageを調べています。
-
VBAをJavaScriptに変換したいです
-
ダミーフォームの内容を送信用...
-
javascriptで複数の計算を同時...
おすすめ情報