jQueryのappnedで追加した<li>タグをページ更新で消えない様にするには

Question

前提・実現したいこと

選手データを取得を押すと<li>タグで追加されて表示される様にしました。
しかし、ページが更新されるたび<li>タグが消えてしまいます。
ページ更新してもそのまま維持したい。

（✳︎tableはflaskで書いています）

該当のソースコード

<ol id="base-list">
    </ol>
    <table id='base-table' class="table table-bordered">
      <thead>
        <tr><th>選手</th>{%- for i in players_columns %}<th>{{ i|e }}</th>{%- endfor %}</tr>
      </thead>
      <tbody>
        {%- for i in players_values %}
        <tr><th>{{ players_index[loop.index0]|e }}</th>{% for j in i %}<td>{{ j|e }}</td>{% endfor %}</tr>
        {%- endfor %}
      </tbody>
    </table>
<script>
    $(document).ready(function() {
    var table = $('#base-table').DataTable( {
        dom: 'Bfrtip',
        select: true,
        buttons: [
            {
                text: '選手データ取得',
                action: function () {
                    var data = table.rows( { selected: true } ).data();
                    $("#base-list").append(`<li>${data[0].slice(0)}</li>`);
                }
            }
        ]
    } );
} );
</script>

Answer 1

どのタイミングで「確定」するのか次第です。

• DBに保存しておいて画面表示時にflaskで描画する
• LocalStorageに保存しておいて画面表示時にJavaScriptで描画する

いずれにしても、JavaScriptで生成した要素はその場かぎりなので、どこかに保存しておく必要があります。

Comments

[HaTea]

ご回答ありがとうございます。
LocalStorageの方で実装していこうと思います。

[m.ts10806]

ケースバイケースです。
localstorageはブラウザにデータを持つので、その気になればユーザーが消せますし、要領の上限も少ないです。消さない限り半永久的に残り続けます。
あくまで「一時的に預けておく」くらいの使い方が推奨です。

[HaTea]

ご丁寧にありがとうございます。
その方向で進めていきたいと思います。