存储用户 ID 的最佳解决方案是啥？

Posted 2023-04-14

【中文标题】存储用户 ID 的最佳解决方案是啥？

【英文标题】：What's the best solution for storing a users id?存储用户 ID 的最佳解决方案是什么？

【发布时间】：2019-07-14 08:48:16

【问题描述】：

在 ReactJS 中存储用户 ID 以便所有组件都可以访问它的最佳方法是什么？

我已经研究过 Redux 和 Context，但它们对于仅存储一个 ID 似乎太过分了（或者我可能遗漏了什么？）。我还研究过将 ID 存储在父组件 (App) 中，但页面刷新会丢失 id :(.

【问题讨论】：

嗯，当页面刷新时，您可能应该根据您的会话再次下载用户 ID？

【参考方案1】：

会话存储可能最适合您的需求

sessionStorage 属性允许您访问当前源的会话存储对象。 sessionStorage 类似于 localStorage；唯一的区别是 localStorage 中存储的数据没有过期时间，而 sessionStorage 中存储的数据会在页面会话结束时被清除。

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

然后您可以在需要时设置/获取 ID

sessionStorage.setItem('userID', 'value');
const USER_ID = sessionStorage.getItem('userID');

但是，要在页面关闭后保留 ID，您需要使用 localStorage

只读的 localStorage 属性允许您访问文档来源的存储对象；存储的数据跨浏览器会话保存。 localStorage 与 sessionStorage 类似，只是 localStorage 中存储的数据没有过期时间，而 sessionStorage 中存储的数据会在页面会话结束时（即页面关闭时）被清除。

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

localStorage.setItem('userID', 'value');
const USER_ID = localStorage.getItem('userID');

【参考方案2】：

如果您希望您的数据在关闭并重新打开浏览器后仍然可用，LocalStorage 是存储数据的合适位置；否则，只要浏览器打开，SessionStorage 就会保留您的数据。

【讨论】：

也是正确答案，但马克给出了更多细节:)

【参考方案3】：

将用户 ID 等敏感数据保存在存储空间中是个坏主意！ 每次用户硬刷新他/她的浏览器时，您都需要获取此数据。请勿使用存储来节省此类费用！