在页面刷新时保持反应状态最好在客户端答案

【问题标题】：Persisting react state on page refreshes preferably on client side在页面刷新时保持反应状态最好在客户端
【发布时间】：2021-09-27 16:24:52
【问题描述】：

在我的 React 应用程序中并且是 React 的新手，我使用 localstorage 来存储一些我需要的特定数据以及 useEffect() 挂钩。

唯一的问题是我希望能够隐藏这些特定数据，我假设我不能或者可能打乱本地存储中的数据。

我基本上需要在页面刷新时保持状态并且不确定最好的方法是什么。我需要维护的状态都在父 App.js 组件中。

任何人都可以协助最佳做法。

【问题讨论】：

在前端持久化数据的唯一方法是cookie或localStorage，后者最适合此。您当然不能在前端隐藏数据，除非您使用存储在服务器上的密钥对其进行加密（并且有很多警告）。假设前端的所有内容都对您的用户完全可见。
为什么需要隐藏这些数据？它已经在客户端，无论它是否在本地存储中，您的用户都可以访问它。
@Dominik 我正在查看隐藏的数据是敏感的。除了 localstorage 之外，是否还有另一种方法可以在页面刷新后保留这些数据而无需访问服务器并且用户也无法更改？
@ArthurJ 不，没有。如果数据在前端，它总是可以访问和打开的。就像 Joel 说的那样：如果它一开始就存在，它就会受到损害
如果数据是敏感的，它应该不存储在前端。这是我的解决方案，被认为是好的做法

【解决方案1】：

请参阅this question，了解在刷新期间保持状态的方法。您当前使用localStorage 的方法听起来很合理。

至于数据可见性问题：无论您是否将数据存储在 localStorage 中，您的前端代码完全可以访问数据这一事实意味着它已经受到损害。在将数据插入localStorage 之前“加扰”数据不是一种有效的安全措施。如果用户看不到这些数据是绝对关键的，那么您需要确保您的后端根本不会发送它。

【讨论】：