页面返回如何保留之前ajax加载的数据，ajax同步请求加sessionStorage

最近做毕设遇到这个问题，用户点击按钮发出ajax请求并刷新局部页面数据及DOM样式，但当用户进入详情页再返回之后之前ajax加载的样式及数据都消失了，搞得我焦头烂额了好几天，网上查找的资料都没能解决我的问题，不过还好最终还是找到了解决方案。

先说我的解决方案：
两个技术点：ajax同步请求 + sessionStorage

ajax默认为异步请求，要想保留之前ajax加载的数据，我把异步请求改为了同步请求即 async:false; 为什么我要让我的ajax请求改为同步呢，因为我发现在详情页返回之后我的页面的onclick触发ajax就失效了，点击不了，所以改为同步请求，让ajax随页面加载时进行同步加载。

同时，还得用sessionStorage来存储之前加载的数据，让页面在重新加载的时候提取sessionStorage之中存储的数据并加载到页面上。
　　　　
　　　　　　　　js中sessionStorage数据存储操作：
　　　　　　　　sessionStorage.setItem(‘key’,‘value’);
　　　　　　　　数据提取操作：
　　　　　　　　sessionStorage.getItem(‘key’)；
　　　　　　　　删除保存的数据：
　　　　　　　　sessionStorage.removeItem(‘key’);
　　　　　　　　删除所有保存的数据：
　　　　　　　　sessionStorage.clear();

还有一种方案：利用H5 history的新特性window.history.pushState(), window.history.replaceState(),以及浏览器历史记录前进后退监听器window.onpopstate事件。

使用方式网上已有很多资料我就不赘述了，其大体思路为：把ajax更新过后的数据保

存在state中，即pushState()或者replaceState()第一个参数，这俩函数的参数相同，

保存state之后把网页推进历史记录之中，使用pushState还是replaceState根据需求

定，然后在页面前进后退时会触发window.onpopstate事件，在事件里写具体逻辑：

把state中的数据取出来加载到页面上即可。

我的问题是浏览器物理后退并没有触发我的onpopState事件，但是我手动写入history.back();又可以触发，有点儿凌乱。。。所以最后弃用了这种方案重头再来，，（悲愤.jpg）