Javascript：为单页应用程序存储一个全局变量

Question

一个使用单个页面的反应应用程序。我调用 index.html 并使用 ajax(axio) 并更新页面。我不使用任何路由。

我有一些全局变量，将在整个应用程序范围内使用。例如，变量是原始类型整数。有些变量可能会在应用程序生命周期中更新，有些则保持不变。但我应该能够从所有反应组件/javascript 中访问它们。它们可能包含与业务相关的常量或示例十进制格式掩码，在每个组件中将它们保持私有将没有用。

没有必要/没有理由将其存储在磁盘 (localStorage) 上。

问题是：在应用程序中存储全局变量 foo 的最佳方式（性能等）是什么？

window.foo = 10 or
window.sessionStorage.foo = 10

AFAIK，window.foo 用于单个页面，sessionStorage 允许在同一来源的多个页面中使用。当我使用单页时，什么是最好的？ window.foo 的使用还有其他缺点吗？安全性不重要，存储的值不敏感。最关键的是性能。

Answer 1

您可能想使用context 而不是其中任何一个。从该文档中：

上下文旨在共享可被视为 React 组件树“全局”的数据，例如当前经过身份验证的用户、主题或首选语言。

绝对不要使用全局变量。全局命名空间难以置信地拥挤，添加它通常不是最佳实践。如果您确实为此使用了一个全局变量，我建议您只使用一个，并让它引用一个具有您想要共享的各种信息的属性的对象。请注意，它们将是特定于窗口的。

可能考虑使用sessionStorage（或者可能定期将您的 React 上下文同步到它）的一个原因是，如果您希望一个窗口中的更改反映在另一个窗口中。来自同一来源的两个窗口/选项卡共享相同的sessionStorage，并且当另一个更改该存储时可以获得事件（storage）。因此，如果全局信息是应用程序主题（例如，浅色与深色），如果您通过更新 React 上下文来响应 storage 事件，则在一个选项卡中更改它也可能影响另一个选项卡。注意sessionStorage（和localStorage）只存储字符串，所以通常的做法是在存储时转换为JSON（JSON.stringify），在加载时从JSON转换（JSON.parse）。