本文共 1030 字，大约阅读时间需要 3 分钟。

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

项目框架：SpringMVC

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

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

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

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

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

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

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

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

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

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

4、页面缓存--H5 localStorage 

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

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

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

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

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

可查看文章：

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

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