网页跳转如何保留上个页面的参数，以便返回时保持相同的状态？

Question

页面A是有本身需要用到的queryString传过来的两个参数叫firstSubject和secondSubject，这两个参数页面B不需要用到。

页面A还有筛选按钮，点击筛选按钮跳转到筛选页面B，因为有三个不同的筛选类型（等级，地区，专业），所以跳转到页面B时还要传是哪个类型，在页面B选完选项确定后带着选项返回页面A。讲的有点绕，但愿能看明白。

页面A的三个筛选按钮：

页面B：（选择地区时）

目前的做法是都通过queryString传，但是觉得逻辑很乱，代码可读性很差。大神们有什么好的方案推荐吗

Answer 1

你觉得很乱那是因为你把A,B页面的参数都平铺拆开来了,没有做区分
当A页面跳B页面时,除了添加B页面所需要的参数,再额外添加一个用于保存A页面的参数,比如叫state.state由A页面的queryString使用btoa函数编码。B页面回跳A页面时把state参数用atob函数解码得到跳转前A页面的状态

// /page-a.html?a=1&b=2
const state = btoa("a=1&b=2")

// /page-b?state=YT0xJmI9Mg==
const pageQuery = atob("YT0xJmI9Mg==")

Answer 2

如果不想放到query里面，可以存储到localstorage中