ios 中 localStorage 与微信支付的坑（工作记实）

男娘i 2022-10-02 06:53 176阅读 0赞

> 系统：IOS
> 
> 浏览器：Safari

上星期遇到一个IOS支付的问题。需求如下：

1.  在 页面A 拉起 微信支付；
2.  支付成功后返回 页面A 弹出支付确认弹窗；
3.  点击弹窗校验订单支付情况；

根据需求代码实现如下：

1.  在 页面A 请求后端接口 创建 微信支付链接 和 订单编号 并 通过 localStorage 保存本次的 订单编号（设id:1）；
2.  在 页面A 打开 微信支付链接 成功拉起微信支付功能；
3.  微信支付后 返回 页面A 点击 支付确认弹窗 将 localStorage 的 id 发送给后端校验订单支付情况；

正常情况下，确实没有问题。可是当用户首次取消支付，再重新创建订单 （设 id:2）。再支付成功后 返回 页面A ，这时候再点击 支付确认弹窗按钮时，读取的 localStorage 的值既然是 第一次创建的订单编号 id=1。

当我点击 Safari 浏览器的窗口管理时，发现居然同时存在两个 页面A，恰好 微信支付成功后返回的页面居然是第一次的窗口，所以不管后面重新创建多少次订单，localStorage 的数据 id 始终是第一次创建时保存的。切换到浏览器的另一个 页面A 窗口，发现值又是最新的。这就难受了，好好的居然出这茬，怎么办？

最开始我是使用的 sessionStorage 经过网上一顿操作后，得知要使用 localStorage。后来 localStorage 都有问题后，我才去排查是不是 订单编号 出了问题。最后找到了原因，解决办法其实很简单，使用 cookie 就可以啦。此时此刻，除了想太阳库克，也没有别的想法了。

也许除了文中的情况之外 ，其它的有可能创建新窗口的情况下也有同样的问题，大家在使用 sessionStorage 和 localStorage 时应当考虑该问题。

本篇文章希望能帮助到与我一样“捉鸡”的大前端。没啥想说的，一起太阳他！

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220113/a450e023516d422d99fbf3699a5a4ca4.png