sessionStorage 踩坑记

背景：从 page1 页面跳转到 page2 页面，page1、page2 分别属于A、B两个前端 react 项目。

问题：本地分别启动 A、B 两个项目，在浏览器中访问page1(开发环境在url 中带有 token 参数，然后保存在 sessionStorage 中)，从 page1 用 location.href 跳转到 page2，在 page2 中完成业务操作，然后用 location.href 跳转回 page1，因为缺少 token 报错。

分析：跳转过程中都是在同一个页签下，众多周知，sessionStorage 中的值可以保存到关闭页签时，也就是说，只有重新打开页签才会丢失 sessionStorage 中的值。那么上面的报错是怎么产生的呢？原来，origin 的改变也会清空 sessionStorage 中的值。也就是说，协议、域名、端口号其中任意一个值改变都会引起 sessionStorage 被清空。

解决：既然已经发现问题的根源，那么解决起来就很简单了。两种方式：其一，在 A 项目中设置代理，在不改变 origin 的情况下跳转；其二，在跳转链接中拼接 token 参数。

说明：生产上一般不会存在这个问题，因为同一个公司的前端项目 origin 一般是相同的。