在微信公众号里实现了一个手机网页版的商城。但是出现了一个体验问题，首页有多个商品分类，体现为一个水平的 tab，每切换一个分类，下方的商品列表会随之变化。实现方式用的是 vant ui 的 tab 组件，即 vuejs 的实现。但是点击一个商品进入商品详情页，再退回首页，之前选中的分类又恢复了初始状态。
现象
- 下拉的位置是对的
- 选中的分类 tab 是错的
下拉位置正确，说明内置浏览器还是有基本的还原状态的机制。
解决思路
只要在返回原页面时知道最后一次点击的分类 tab 是什么就可以了。
所以，需要一个状态保存和提取的机制。
history.replaceState 在微信内置浏览器内无效
history.replaceState 是常用的一种前后页面间共享状态的方式。存入的 state 参数，在页面返回时，会通过 window.onpopstate 事件返回当前页面。
但是实际测试发现，无论我将 window.onpopstate 事件监听放到 vue 生命周期的 beforeCreate，还是其他任何周期函数中，都无法监听到该事件。挪出 vue 对象也同样无效。
所以，我怀疑微信内置浏览器根本不支持这个事件。。。
localStorage 最简单的反而是最有效的
history.replaceState 行不通之后，我觉得这样搞还是复杂话了。实际上完全可以用 cookie 或者 localStorage 来实现。
用 cookie 不合适，因为没有提交到服务端的必要。所以，用 localStorage 存取状态再合适不过了。
而且，还有一点，在微信中如果关闭当前网页，很快微信就会清空该网页的 cookie 和 localStorage 数据，这一原本是个坑的机制，反而对体验更加友好，因为关闭页面之后，把选择状态重置是个合理的做法。
关于作者 🌱
我是来自山东烟台的一名开发者，有敢兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式
