在新选项卡上保留状态，但不刷新页面答案

【问题标题】：Retain state on new tab, but not page refresh在新选项卡上保留状态，但不刷新页面
【发布时间】：2021-12-16 18:07:33
【问题描述】：

我试图让 JS 状态在用户打开新选项卡（或新窗口）时保留，但在显式页面刷新时不保留。这在 JS 中可能吗？

所以我试图以某种方式实现 sessionStorage 可以根据 MDN 文档给出哪些状态的反转； 在新选项卡或窗口中打开页面会使用顶级浏览上下文的值创建一个新会话，这与会话 cookie 的工作方式不同。

【问题讨论】：

【解决方案1】：

听起来您可以将状态保存在本地存储中。加载页面时，检查是否存在会话存储值 - 如果存在，请不要从本地存储中检索数据。否则，如果会话存储值不存在，则它是一个新页面，在这种情况下，您可以从本地存储中检索状态。

无论如何，无论何时加载页面，设置一个会话存储值，以便稍后通过上述逻辑读取它，以防页面被刷新。

【讨论】：

所以你是说在本地和会话存储中都有状态？同样在页面刷新时，我从服务器获取此状态值......所以在第一页加载时，我希望在我的客户端设置/使用来自服务器的状态，但在后续页面加载时，UI 状态应该是应该使用的那个（忽略来自服务器的状态）
您必须在会话存储中保存的只是一个指示页面之前是否已加载的标志 - 如果页面加载时不存在该标志，则从本地存储中检索实际保存的状态值。否则，如果该标志确实存在，那么用户已经刷新了一个选项卡，而不是加载一个新选项卡，因此您需要从服务器检索该值。
我刚试过...所以当打开一个新选项卡时，会话存储变量在该新选项卡上不可用...所以就像第一次加载页面一样.. ..
在页面刷新时，我确实看到了更新后的 sessionStorage 变量值，即即使在我刷新后它仍然显示为 true
只是补充一下，我创建了一个自定义钩子并使用如下 - const [pageLoad, setPageLoad] = useSessionStorage('pageLoad', false) 最初，然后在初始 API 调用后的某个地方，我调用 setPageLoad （真）