iOS 上的 Facebook 浏览器：localStorage 的问题答案

【问题标题】：Facebook browser on iOS: problems with localStorageiOS 上的 Facebook 浏览器：localStorage 的问题
【发布时间】：2018-04-30 14:35:13
【问题描述】：

当网站在 iOS 和 android 上的 Facebook 浏览器中打开时，我们的 webapp (react) 的本地存储行为很奇怪。我们有一个身份验证流程，它依赖于将令牌存储在本地存储中并读取它。当我们的网站在 facebook 浏览器中打开时（用户在 Facebook 上单击指向我们网站的链接），我们看到的症状是身份验证流程在第一次尝试时失败在登录但 工作第二次尝试登录。看起来本地存储是异步的。至少它的行为与 Chrome、Firefox 和 Safari 等其他浏览器不同。

我尝试在登录后重定向之前执行长达 700 毫秒的 setTimeout，但它仍然无法从本地存储中读取令牌。但是，我可以在 localstorage.setItem(key, value) 之后立即执行 localstorage.getItem(key) 并获得预期的结果。

【问题讨论】：

“第一次尝试登录失败，但第二次尝试登录”听起来像用户在普通浏览器中进行第一次登录（用户自己打开），并从 Facebook 重定向回来在另一个浏览器中登录——Facebook 的应用内浏览器，它可能有一个独立的 localStorage。
您找到解决方案了吗？我在尝试将令牌存储在 localStorage 中时遇到了同样的问题，我认为它们在某些时候会丢失。
不知何故我设法破解了一些东西，但我不记得解决方案了。

标签： javascript ios html facebook

【解决方案1】：

如果有人在 Fasebook 应用内浏览器中遇到 localStorage 问题，请确保将字符串设置为 localStorage 中的变量（不是数字、布尔值等）。这是一条简单的规则，但有时当您没有出错时您会忘记它。

我的代码在 smarty Chrome 中工作，但在 Facebook 浏览器中没有按预期工作，因为 exp 变量是一个数字：

window.localStorage.setItem("exp", exp);

但是这段代码在两种浏览器中都运行良好：

window.localStorage.setItem("exp", ''+exp);

【讨论】：