页面跳转后查询状态保存问题的解决（较为笨拙的方法）

太过爱你忘了你带给我的痛 2022-05-31 11:40 229阅读 0赞

问题描述：页面查询时，在当前页面A输入查询条件之后，跳转至另一个页面B，当重新点击页面A时，输入的查询条件和查询结果均被初始化，需要重新输入查询条件，用户体验不好

项目框架：SpringMVC

项目结构：上部导航栏中每一个tab对应一个controller，当点击tab时，此时就会重新加载页面，页面被初始化，查询条件被清空

![70][]

思考过和使用过的解决办法：

1、将上述7个模块放在同一个页面中，点击对应模块出现对应页面

问题：此时需要将7个模块的代码放置在同一个controller中，代码冗余量增大

jsp页面代码量较大，对于代码的修改将是一件令人头痛的事情

由于框架的限制，点击分页时，将会出现一次点击控制多个页面的页码变化（体验不好）

2、多个iframe叠加，点击一个tab显示对应页面，置顶于其他页面

问题：此时页面与页面还是处于隔离状态，无法在一个页面中保存另一个页面的查询状态

3、Spring Cache缓存技术，将每个页面的查询状态保存在缓存中，当再到此页面时，查询是否存在查询状态，有则显示

问题：Spring缓存是方法级别的缓存，（一篇很好的缓存文章：[注释驱动的 Spring cache 缓存介绍][Spring cache]），文章中提到在方法上添加注解，可以将方法中的参数作为key，方法的返回结果作为value保存在缓存中；我的问题在于，我的方法返回结果是SpringMVC中的view路径，而我想要缓存的是从前台页面传回来的查询参数

![70 1][]

4、页面缓存--H5 localStorage

问题：localStorage是缓存在本地，当浏览器关闭时同样存在，启动浏览器时，上次的查询状态同样会显示

我并不需要它存留很长时间，所以缓存在本地是不能满足要求的

小技巧：浏览器工具（F12）打开Application可以查看缓存

![70 2][]

5、页面缓存--Sessionstorage （最终解决方案采纳）

Sessionstorage 和 localstorage都是H5中针对cookie缓存大小不够出的解决方案，两者有些不同

可查看文章：[http://blog.csdn.net/fcdd123/article/details/56286106][http_blog.csdn.net_fcdd123_article_details_56286106]

最终采纳这种解决方案，但也有一些不完美，当点击父tab时无法统一清除缓存（即清除7个模块的查询状态）

![70 3][]

由于Sessionstorage 和 localstorage都只在当前页面有效，所以就采用了一种笨方法，使用HttpSession保存一个考勤审核链接带过来的参数index，再在七个controller中获取并携带到页面中，根据index是否等于某个值来判断是否清除当前页的查询状态

[70]: /images/20220531/0516eb05f6614f20b483b01aa04b66c8.png
[Spring cache]: https://www.ibm.com/developerworks/cn/opensource/os-cn-spring-cache/
[70 1]: /images/20220531/d7f96381d90241699f5c6466ac047393.png
[70 2]: /images/20220531/790d6ec5a36e4fa887da0815c09b1b46.png
[http_blog.csdn.net_fcdd123_article_details_56286106]: http://blog.csdn.net/fcdd123/article/details/56286106
[70 3]: /images/20220531/c23cf25bbfe74f4788ad8d810bfbda78.png