Question

问题：

是否有api或方法来确定页面显示的当前标签/窗口的某种id / uuid在刷新页面时是否稳定？

为了给你更多的背景，为什么这对我很重要：

我的用例是允许我的单页应用（SPA）同时在多个标签页中打开。

现在我无法做到，因为当前状态持续存在于＆＃34; currentModel＆＃34; localStorage中的财产，遗憾的是并非SPA的所有网址都是＆＃34;自包含的＆＃34; 。通过＆＃34;自足的＃34;我的意思是url本身应该足以从后端（或localStorage）重新加载该状态，因为它包含某种id / uuid（我的SPA的这个缺陷在历史上已经增长，我知道它不是HTML是什么意味着要使用，但是因为有超过60个开发人员在这个SPA工作的团队，你可以想象这不能在一天内重构。）

所以我有一些这样的网址＆＃34; /搜索＆＃34;显示搜索表单，以及有关当前上下文的信息（即思考业务对象）。

现在，如果我想允许在多个标签中同时打开SPA，我就不能再使用简单的＆＃34; currentModel＆＃34;属性。相反，我需要将其作为一个hashmap，其中键是tab / window id，以便在用户在其中一个选项卡中点击F5 / refresh时，可以恢复选项卡的上下文。当然，这个id在页面重新加载时需要保持稳定。

我知道的

的变通方法

编写可以访问标签的自定义浏览器扩展程序
更新网址以包含＆＃34;标签＆＃34; -id在SPA被引导时创建

Answer 1

您仍然可以利用localStorage，但不是保留一个代表您所在州的对象，也许您应该逐个路线保持状态？

const state = {
  "/": { state: {} },
  "/page-2": { state: {} }
}
// persist state
localStorage.setItem('state', JSON.stringify(state))
// unwrap state for route /
const routeState = (JSON.parse(localStorage.getItem('state')))['/']

Answer 2

当用户刷新页面时，您可以尝试利用window.onbeforeunload操作来保存页面的状态。你可以这样做：

window.onbeforeunload = function(event) {
    localStorage.setItem('lastState', JSON.stringify(state))
}

然后当页面重新加载时，检查localStorage中是否存在状态，加载它并将其删除。此方法假定用户不会同时重新加载页面和打开新页面。否则，在保存状态时需要一些其他标识符，这会让您回到原来的困境中。

Answer 3

window.name属性（至少在现代Firefox和Chrome中）在F5页面重新加载时保持其值。因此，代码可以检查window.name是否有导航提示或其他任何可能有用的东西，以便它能够得到它的支持＆＃34;在URL本身没有信息的情况下。

因此，新加载的选项卡将能够检测到它实际上是新加载的，并且可以随时插入和更新窗口的name属性。在重新加载时，代码可以嗅探name并从服务器请求其他内容（或做任何事情），如果它看到窗口名称中已经存在的那种信息。

我已经能够在非常有限的测试中将任何类型的字符串放入该属性中，但是IE可能会对名称必须具有某种特定形式（如有效标识符或其他内容）感到挑剔。

是否有可能在页面重新加载时获得保持相同的标签（或窗口）标识符？

问题：

为了给你更多的背景，为什么这对我很重要：

我知道的

3 个答案: