jquery中数据属性的替代方法

Question

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

网页代码

<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> 

Jquery Code

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

现在上面的代码显示了我们(特别是 i(通常在单击时如何从列表中选择特定内容，在此过程中，正如您在 HTML 代码中看到的那样，我向用户发出或显示pakcageId，即任何人都可以在浏览器中执行检查元素并查看甚至操作data-package属性， 为了安全起见，我对所选数据进行了服务器端检查。

我的问题

有没有办法隐藏这种数据暴露，或者有没有其他更干净的方法来实现这一目标，因为我见过人们使用Angular、Webpack等能够实现list selection而无需提供或显示任何可以通过浏览器中的检查元素功能查看的数据。

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

Answer 1

您可以创建一个Map，其中键是任意的、自动递增的标识符，值是包号：

const idPackageMap = new Map()
// id generator: whenever you call it, "i" is incremented and returned
const id = (() => {
let i = 0
return () => ++i
})()
const addPackage = package =>
idPackageMap.set(id(), package)
addPackage(2346343)
addPackage(5465654)
addPackage(3455675)
console.log('contents: ', [...idPackageMap.entries()])
console.log('package number for id 2: ', idPackageMap.get(2))

现在，当您插入这些<div>元素时，您可以设置任意标识符，当您需要找到实际的包号时，只需使用Map#get：idPackageMap.get(1)(使用任意标识符更改1(。