Javascript Jquery中数据属性的替代方法

我有一个网页，用户可以从列表中选择要购买的不同套餐之一。包详细信息来自数据库

HTML代码

现在，上面的代码显示了我们（特别是我）通常是如何在单击时从列表中选择特定内容的，在这个过程中，正如您在HTML代码中所看到的，我向用户分发或显示

pakcageId

，即任何人都可以在浏览器中执行inspect元素，查看甚至操作

数据包

属性，为了安全起见，我对所选数据执行服务器端检查

我的问题

有没有办法隐藏这种数据暴露，或者有没有其他更干净的方法来实现这一点，因为我见过有人使用

Angular

，

Webpack

等来实现

列表选择

，而无需给出或显示浏览器中inspect element功能可以看到的任何数据

---

注意：如果我的问题太基本，很抱歉，如果无法使用jquery完成此操作，我还可以使用哪些其他技术？

您可以创建一个

映射，其中键是任意的、自动递增的标识符，值是包号：


const idPackageMap=new Map（）
//id生成器：无论何时调用它，“i”都会递增并返回
常量id=（（）=>{
设i=0
return（）=>++i
})()
const addPackage=package=>
idPackageMap.set（id（），包）
addPackage（2346343）
addPackage（5465654）
addPackage（3455675）
console.log（'contents:'，[…idPackageMap.entries（）]））
console.log（'id 2的包号：'，idPackageMap.get（2））
您可以将
pakcageId
存储在javascript数组中，然后单击获取它。然而，用户可以看到它，但并不容易。当客户机应该向服务器发送id时，如果没有用户可以操纵数据的风险（或确定性），就无法做到这一点。您可以在js incapsulated变量或自定义DOM对象属性中隐藏一些信息，但客户机总是可以根据需要知道值。另一方面，他总是可以完全绕过服务器向服务器发送数据UI@LucaRainone .... 是的，我知道客户可以通过某种方式或其他方式找到数据，但我只是想让它变得更难，我的问题的目的是了解最佳实践或技术。@GauravKumar如果你看到facebook或twitter的html，你可以捕捉到任何东西的大量id（用户、帖子、评论）。如果所有的检查都是由服务器进行的，那么暴露它们并没有什么坏处。您可以防止数据修改，如一些控制字符串的每一个输入和/或防止CSRF攻击，以不接受输入，而不需要一个链接的UI表单。@ LuLaLayOne OK会考虑！！非常感谢你的澄清。我将尝试实现这一点，只是你可以用你答案的HTML部分编辑这个答案，提前谢谢！！在这种情况下使用angular react有什么好处吗？@GauravKumar您的HTML与您自己的问题正文中的HTML完全相同：只需设置任意的
id
，而不是包号：D@GauravKumar使用其中一些框架的优点是可以使用数据绑定，但核心问题几乎是相同的（您将使用相同的解决方案）。
<div data-package='2346343' class="retail-package">Cost : 10$</div> 
<div data-package='5465654' class="retail-package">Cost : 20$</div> 
<div data-package='3455675' class="retail-package">Cost : 30$</div> 

$('.retail-package').on('click', function() {
   $(this).addClass("selected-package");
   var selectedPackage = $(this).data("package");
});