如何防止控制台修改LocalStorage值？上线后是否仍受影响？

正式上线后LocalStorage仍会受控制台影响 #

不管是局域网测试还是正式上线，LocalStorage都是存储在用户本地浏览器中的数据，用户完全可以通过浏览器控制台、第三方工具甚至直接修改浏览器文件来篡改这些内容——这是客户端存储的固有特性，无法从根本上阻止用户修改本地存储的数据。

为什么把let改成const没用？ #

你修改的是前端变量的声明方式，但const仅限制变量本身不能被重新赋值，和LocalStorage里的存储内容没有关联：

• 你的代码只是在页面加载时从DOM元素读取值并赋值给变量，后续用户修改LocalStorage时，这些变量并不会自动更新；
• 如果你的代码后续直接读取LocalStorage的值，依然会拿到被篡改后的内容，所以这个改动对防止LocalStorage被修改没有任何作用。

防止数据篡改的可行方案 #

1. 关键数据完全存放在服务器端 #

像资金、资产数量这类核心数据，绝对不能依赖客户端存储。正确的做法是：

• 所有关键数据存储在服务器数据库中；
• 前端仅负责展示服务器返回的数据；
• 每次涉及数据变更的操作（比如购买、转账），都发送请求到服务器，由服务器验证数据合法性（比如检查资金是否足够），更新数据库后再返回最新结果给前端展示。
  这种方式下，用户即使篡改了本地存储或DOM内容，服务器端的真实数据不会受影响，前端展示的内容最终会和服务器同步。

2. 对客户端存储的数据进行签名验证 #

如果有些非关键数据必须存在LocalStorage，可以通过服务器签名的方式验证数据完整性：

• 服务器在返回需要存储到LocalStorage的数据时，同时生成一个基于该数据的签名（比如使用HMAC算法，结合服务器端的密钥）；
• 前端将数据和签名一起存储到LocalStorage；
• 当需要使用这些数据时，前端将数据和签名一起发送给服务器验证；
• 如果签名不匹配，说明数据被篡改，前端应丢弃本地数据，重新从服务器获取正确数据。

3. 增加数据合理性校验 #

在前端关键操作前，对LocalStorage中的数据进行合理性检查：

• 比如检查资金数值是否为负数、是否超出正常范围；
• 一旦发现数据异常，立即触发与服务器的同步操作，拉取真实数据覆盖本地存储。

内容的提问来源于stack exchange，提问作者user25707109