以简单的方式存储和删除数据

我有一个网站，用户可以从数据库中选择不同的选项。可以说我有一个动物数据库。用户可以选择不同的动物。我使用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是一条路。（一边：这是“输”不是“松”） –

以简单的方式存储和删除数据

回答

相关问题