Patreon 重定向后浏览器本地存储丢失答案

【问题标题】：Browser local storage missing after Patreon redirectPatreon 重定向后浏览器本地存储丢失
【发布时间】：2019-05-10 07:41:40
【问题描述】：

我有一个简单的网页，它使用客户端脚本在浏览器本地存储中存储一些用户配置。（复选框状态、展开/折叠菜单等）

我的网页上有一个 Patreon 按钮。当用户单击它时，用户的浏览器会导航到 Patreon 身份验证页面，如果用户单击按钮授予我访问其用户支持状态的权限，Patreon 会将他们的浏览器重定向到我记录他们支持状态的站点上的路由，并且然后将它们重定向回我的主页。

当用户最终回到我的主页时，用户的所有本地存储数据都丢失了。如果用户在返回我的站点后单击刷新，本地存储仍然丢失。但是，如果他们关闭选项卡并在新选项卡中打开我的站点（或导航到另一个站点，然后在同一选项卡中导航回），则原始本地存储值将再次可见。

我了解浏览器本地存储与本地存储的来源相关联。 https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

我已确认协议 (https) 和域对于设置存储的点和用户返回我的站点的点是相同的。我也确认最终的着陆路线是相同的。

初始设置本地存储值的主页：https://www.example.com/page1 最终登陆页面：https://www.example.com/page1

我注意到，如果我在 Patreon 重定向路线（Patreon 最初重定向用户和我记录用户支持状态的地方）停止用户，打开浏览器调试器并发出 document.domain 给出：""

但是，设置 document.domain 并刷新并不会恢复本地存储。

我在 Firefox 63.0.3（64 位）和 Chrome 71.0.3578.80（64 位）中都看到了这种行为。

有什么我可能会遗漏的想法吗？

[编辑] 这是我用来将用户状态写入本地存储的代码：

if(localStorage.userOptions){ restoreOptsFromLocal(); }
else{ persistOptsToLocal(); }
...
restoreOptsFromLocal = function(){
    opts = JSON.parse(localStorage.getItem('userOptions'));
}
persistOptsToLocal = function(){ 
    localStorage.setItem('userOptions', JSON.stringify(opts));
}

【问题讨论】：

我的第一个想法是您的本地存储未设置为在 http/https 上工作，但您已确认用户从 https 开始并以 https 结束。你 100% 确定协议是正确的吗？重定向不应该做任何事情，但也许您的代码会在页面加载时清除本地存储？你能分享你保存到本地存储的那部分代码吗？
当然，添加为上面的编辑。那里没有多少，tbh。 opts 是一个带有一些属性的 javascript 对象。另外，我已经确认在用户离开 Patreon 之前本地存储项确实存在。
你在写信之前检查localStorage.getItem('userOptions') 的存在吗？这可能是它被消灭的原因。
是的，我会添加完整的代码。我确定本地存储项目会持续存在并且不会被我的代码覆盖。我已经使用和调试该页面几个月了，没有任何问题。这个问题最近才在我添加 Patreon 按钮时出现。此外，如果用户关闭选项卡并在新选项卡中打开我的页面，则会再次出现原始本地存储对象。我真的怀疑在重定向期间协议域端口元组发生了一些奇怪的事情，但我并不肯定。
保存到localStorage 后多久您会使用 Patreon 重定向？保存到localStorage 是一个异步调用，所以如果两者同时发生，它不会及时保存。如果是这样，您可以使用window.onbeforeunload = function() {localStorage.setItem()}

标签： javascript google-chrome firefox redirect local-storage

【解决方案1】：

花了几个小时寻找和调试，仍然不明白根本原因。当前的解决方法是将 Patreon href 的目标设置为“_blank”，以便在单独的窗口中进行 patreon 身份验证过程。

【讨论】：