簡単な方法でデータを保存して削除する

Question

私は、ユーザーがデータベースからさまざまなオプションを選択できるWebサイトを持っています。私は動物のデータベースを持っていると言います。そして、ユーザーは異なる動物を選ぶことができます。私はデータを取得するためにAJAXを使用しているので、私のページは新しい見出しごとにリロードされません。

したがって、ユーザーは見出しの下に動物を見つけ、チェックボックスをオンにして「子猫」を選択します。ユーザーが検索を続け、「Cute Animals」という見出しの下に「Kittens」がもう一度表示されます。その後、ユーザーが以前にチェックしたので、「子猫」をチェックする必要があります。多くの見出しと異なる動物を検索した後、ユーザーはそれを提出することができます。

私の質問はどうすればいいですか？私は入力の各動物のすべてのIDを追加することを考えていた。この<Input type="hidden" value="1,4,7,14,34,192">のように、しかし、ユーザーがそれをしたい場合は、要素を削除して問題を実現しました。

これを行う方法は他にありますか？

EDIT（明確化）： 私はajaxを使用してデータベースからレコードを取得しています。そしてデータベースは、何千もの動物の列で構成されています。私はAjaxリクエストをパラメータとともに送信しています。かわいそう= 1 &色=茶色&野生= 1 &菜食主義= 1など。パラメタに応じて、適切な動物をプリントアウトします。それが新しい動物をプリントアウトするとき、あなたがもう1回動物が来ることを経験するかもしれません（私が最初にそれを選んだとしても）、それが選択された選択肢でなければなりません。

「かわいい動物」の下で「子猫」を選択し、「茶色」の新しい検索を行い、もう一度子猫が来たら、それを選択する必要があります。

Answer 1

https://www.w3schools.com/html/html5_webstorage.aspが、私は方法を見つけた： すべての動物/チェックボックスは、IDを持っているのlocalStorage（またはのsessionStorage）の完全なドキュメントについては

はこちらをご覧ください。オプションを選択すると、関数addanimal（id）が呼び出されます。次に、隠された入力の中に数値を書き込みます。 選択が解除されると、番号が ''に置き換えられます。

function addanimal(id){ 

if (document.getElementById("animal" + id).checked){ 
    document.getElementById("selectedanimal").value = document.getElementById("selectedanimal").value + " " + id + ", "; 

} else { 
    document.getElementById("selectedanimal").value = document.getElementById("selectedanimal").value.replace(' ' + id + ',', '') 
} 

}

Answer 2

私はあなたの質問を正しく得ることができません。おそらく情報をlocalStorageに保存することができます。