session storageへの保存のやり方

Question

今選択した時間をsession storageに保存すると言うシステムの制作しているのですが具体的な作り方がよく分かりません。
optionタグで作った時間を選択するシステムの内容を何らかの方法で保存したいです。
現在制作したものがこれです。

<h4>"ここで時間を設定してください"</h4>
    <select name=”hour”>
    <option value=”zero”>0時</option>
    <option value=”one”>1時</option>
    <option value=”two”>2時</option>
    <option value=”three”>3時</option>
    <option value=”four”>4時</option>
    <option value=”five”>5時</option>
    <option value=”six”>6時</option>
    <option value=”seven”>7時</option>
    <option value=”eight”>8時</option>
    <option value=”nine”>9時</option>
    <option value=”ten”>10時</option>
    <option value=”eleven”>11時</option>
    <option value=”twelve”>12時</option>

保存する方法を調べると下のような関数が出てきます。このコードの内容を変えて制作するべきなのでしょうか？

$(function() {
            $('.dropdown-menu .dropdown-item').click(function() {
                var visibleItem = $('.dropdown-toggle', $(this).closest('.dropdown'));
                visibleItem.text($(this).attr('value'));
                sessionStorage.setItem('time', $(this).attr('value'));
            });

例えば「９時３０分」と言うデータを保存したい場合、
select name = minutesのように分を選択するHTMLを書く必要がありますよね？
それをsessionStorageにtimeと言う名前で「９時３０分」と保存するためにはどうすれば良いのでしょうか？

Answer 1

sessionStorageへの保存は、引用されているコードのように、以下の形で可能です。

sessionStorage.setItem('time', 値);

後は、セレクトボックスの値を取り出してセットするだけです。
なお、提示されたHTMLは、ダブルクォートとして全角文字「”」が使われているので、半角の「"」に修正してください。

---

（追記）

セレクトボックスの値の取得とセットの仕方は"value"の値からとってそれをセットで合ってますか？

はい。あっています。

もう一つお聞きしたいことがあるのですが例えば「９時３０分」と言うデータを保存したい場合、

select name = minutesのように分を選択するHTMLを書く必要がありますよね？
それをsessionStorageにtimeと言う名前で「９時３０分」と保存するためにはどうすれば良いのでしょうか？

option要素にてvalue="９時３０分" 等とします。

JavaScriptですが、以下のような感じで。現状のHTMLにあわせてjQueryのセレクタを書きましたが、id属性で指定したほうがよいと思います。

$(function() {
  $('select[name="hour"]').change(function() {
    sessionStorage.setItem('time', $(this).val());
  });
});

Comments

[aobuta]

ご指摘あありがとうございます。
セレクトボックスの値の取得とセットの仕方は"value"の値からとってそれをセットで合ってますか？

[aobuta]

もう一つお聞きしたいことがあるのですが例えば「９時３０分」と言うデータを保存したい場合、
select name = minutesのように分を選択するHTMLを書く必要がありますよね？
それをsessionStorageにtimeと言う名前で「９時３０分」と保存するためにはどうすれば良いのでしょうか？