好吧，最近真的是太忙懒了，都没写过博客了。。。最近做了两个活动，两个活动中对于在页面跳转之后返回，都需要保留原页面的一些状态。于是总结一下。
页面状态描述
例如，一个页面中某个模块，有20条数据，折叠了起来，每点击一次加载更多按钮，则加载5条。那么，当用户展开了10条数据的时候，点击了跳转的地方。当用户返回的时候。需要展现10数据的样子。即原页面状态。
上张图片或许更好理解：
选择解决方案
①存储方式选择
毫无疑问，要记录状态。必须要暂存数据。这里有两种方式，localStorage和sessionStorage。两者的区别就不多说了。不过，这种情况下，当然是sessionStorage更好。
还没了解这两个的区别的戳这里。
②存储时机选择
这里就有必要提到我之前写的一片总结，《JS实现页面进入、返回定位到具体位置》。第一种方案，就是可以沿用这种方式。在用户点击的时候记录一下。但是这里我要说的不是这种方案。
而是利用window.onunload方法。
也就是说，用户跳转会触发这个事件，那么只要在这个方法中记录相应的数据到session里面即可。
如：
window.onunload = function(){ cache.setItem('pageHeight',document.body.scrollTop); //没错，返回定位也可以这样记录 cache.setItem('historyState',{ essayArrowFlag:self.essayArrowFlag,//展开文案为展开还是收起的标志 backupEssay:self.backupEssay,//用户当前展示的数据 backGuideEssay:self.backGuideEssay //总数据 }); }
嗯。这样在页面加载的时候，先读取缓存。然后进行相应的赋值展示即可。
咋一看，似乎没什么问题。下面就来说说我遇到的“小坑坑”。
优缺点比较
①优点
1.不用绑定额外的事件，不用频繁记录。减少了开销。
2.不用写额外的函数。
②缺点
1.最致命的缺点就是，会在开发过程中给调试带来不便。仔细看看方法描述，不错，页面刷新也会调用该方法。也就是说，如果你需要删掉缓存的数据，再来一次的话。根本删不掉，必须新开一个页面。
2.也由于数据难删掉的原因，假如更新了某条数据的某些信息。即使是刷新页面也不会重新请求，取不到最新数据。加上实际情况下，同一模块的数据，往往会有几个不同的请求接口来提供。假如有些接口的信息更新了，而另一些跟不上。经常报错。整段垮掉。这给测试也带来了不少麻烦。
优化方向
1.最简单的，封装一下缓存模块。开发的时候，设置一个很小的缓存数据过期时间。
2.加多些从新请求数据的判断，例如，当某个接口的数据不对应时，所有接口都需要重新请求等。