以簡單的方式存儲和刪除數據

我有一個網站，用戶可以從數據庫中選擇不同的選項。可以說我有一個動物數據庫。用戶可以選擇不同的動物。我使用AJAX獲取數據，因此我的頁面不會爲每個新標題重新加載。以簡單的方式存儲和刪除數據

因此，用戶在標題「棕色動物」下找到動物，並通過選中複選框選擇「小貓」。用戶繼續搜索並在標題「可愛的動物」下，「小貓」再次出現。然後應該檢查「小貓」，因爲用戶之前檢查過它。在搜索了許多標題和不同的動物之後，用戶可以提交它。

我的問題是我該如何做到這一點？我正在考慮在輸入中爲每個動物添加每個Id。像這樣<Input type="hidden" value="1,4,7,14,34,192">但通過刪除元素，如果用戶想要這樣做，意識到了這個問題。

有沒有其他辦法可以做到這一點？

編輯（澄清）： 我使用ajax從數據庫中獲取記錄。數據庫由數千行動物組成。我正在發送一個帶有參數的Ajax請求，例如。？cute = 1 & color = brown & wild = 1 & vegetarian = 1等等。並根據參數打印出正確的動物。當它打印出新的動物時，你可能會體驗到一隻動物第二次出現（即使我第一次選擇它），如果是這種情況，它應該是一個選擇的選項。

因此，如果我選擇了「可愛動物」下的小貓，並重新搜索「棕色」，並且小貓再次出現，應該選擇它。

來源

2017-06-12 William82

考慮尋找到支持數據綁定，如[angularjs（https://angularjs.org/） – Danny

從UX點，你可能會想辦法來顯示所有的框架檢查選項，以便用戶確切知道他們提交的內容。像這樣的表單也可以負責存儲數據。 – fqhv

@fqhv是的，我真的想顯示所有選中的選項，這樣的表單如何負責存儲數據？你在想一個常規的HTML表單嗎？ – William82

我找到了一種方法：每種動物/複選框，有一個ID。當我選擇我調用函數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 + ',', '') 
}

}

來源

2017-06-12 21:40:50 William82

-1

我不知道我是否正確地得到您的問題;但可能您可以將您的信息存儲到localStorage中。

對於localStorage的（或sessionStorage的）的完整文檔，請看看這裏：https://www.w3schools.com/html/html5_webstorage.asp

來源

2017-06-12 17:57:48 aorfevre

由於它全部在通過AJAX更新的頁面上，因此不需要使用localStorage - js變量可以保持選擇。 –

除非你失去了這個內存，如果你用JS重新加載頁面，而不是localstorage – aorfevre

你是對的，但是OP特別聲明_「我使用AJAX來獲取數據，所以我的頁面**不會爲每個新的**重新加載**標題「_以及localStorage，您必須針對用戶在上次訪問後新近到達該頁面的情況進行編程，並且您可能需要清除localStorage中的舊選擇。現在，如果你想記住過去的選擇，那麼我同意localStorage是一條路。（一邊：這是「輸」不是「鬆」） –

以簡單的方式存儲和刪除數據

回答

相關問題