appendChildで追加した要素が消えてしまう

Question

前提・実現したいこと

初心者です。単語帳を作ろうとしています。

【実現したいこと】
textareaから値を取得して、その値でselectにoptionを新規追加する。

【現状】
確かに”登録”を押すと一時的にoptionが増え、選択ができるようになるが、ページを更新（F5）すると消える。

appendChildを使えば、要素がHTMLのソースコードに直接書き込まれ保存されると思っていたのですが、違うのでしょうか？サーバーサイドでしかできないのでしょうか。

当たり前のことを聞いていたら、すいません。
対応策を教えて頂ければと思います。よろしくお願いいたします。

該当のソースコード

        <p>カテゴリー選択</p>
          <select name="select" id="select" class="form">    <!-- select -->
           <option id="category1">  </option>
          </select>
          <textarea rows="1" cols="30" id="newCategory" placeholder=" 新しいカテゴリーをつくる"></textarea>

          <button type="submit"　name="登録" id="click" onclick="onButtonClick()">登録</button>
    </main>

    <script type="text/javascript">
      
      function onButtonClick(){

        const categoryName   = document.getElementById("newCategory").value; //新規カテゴリの値を取得
        const categoryId     = document.createElement("option"); //オプションを作成
        const categoryLength = document.getElementById("select"); //既存オプション数＋１を、新規オプションのID名として設定↓
        categoryId.id = "category"+categoryLength.length+1;
        categoryId.innerHTML = categoryName; //IDをもとにオプションに値を追加
        
        select.appendChild(categoryId); //セレクトに作成したオプションを追加
      };

    </script>

Answer 1

appendChildを使えば、要素がHTMLのソースコードに直接書き込まれ保存されると思っていたのですが、違うのでしょうか？

JavaScriptの役割を勘違いしています。
ソースコードに書き込みをするというより、「現在表示されている要素（DOM）に対して影響する」だけです。
コードが書かれているHTMLファイルに対して直接書き込むような影響があったり、影響した要素をデータとして保存する機能はありません。

サーバーサイドでしかできないのでしょうか。

Web Storage APIやIndexedDB APIなどを利用すれば「ブラウザに」データを保持することはできます。

ただそれはあくまでブラウザごとにデータを保持するので、別のブラウザにまで横断して保持する仕組みはありません。
「データの共有」までするのでしたらサーバサイド通してDBに情報を保持するしかありません。要件次第です。

Comments

[fefefe]

素早く明瞭な回答、ありがとうございます！！本当に助かります。

あくまでフロントエンドの言語なのですね。また調べて、認識を改めたいと思います。
自作の単語帳制作については、今のところデータ共有まではせず、ローカルストレージへの保存もなんとか成功しているので、Web Storage APIの線でもう一度考え直してみます。

ありがとうございました。

[m.ts10806]

>ローカルストレージへの保存

ローカルストレージはWeb Storage APIの機能の１つです。
私が提示したリファレンスの「Web Storage の概念と使用方法」にも説明があります。

[fefefe]

大変失礼いたしました。

上記のソースコード（単語帳のカテゴリを新規につくるコード）から省いた部分で、”新規カテゴリに対して問題文とその答えを新規作成する（単語帳のページをつくる）”コードがあり、
保存に際して、ブラウザを閉じても残っていてほしかったので、ローカルストレージを使用することを決め、保存・取得に成功した、という経緯があります。
現状簡易データベースのような形で使っています。いずれはデータ共有もと考えているので、慣れたら徐々に、MYSQLなどに移行したいと思っています。

言葉が足りず、ご心配かけました。
が、上記の経緯にも自分の勘違いなどがあっては困るので、念のため詳細に説明させていただきました。
長々と申し訳ありません。

IndexedDB APIについては、初めて知った情報でしたので、これから詳しく調べてみます。
独学素人なので、本当に助かります。ありがとうございました。