关于保留页面状态的一些总结

好吧，最近真的是太忙懒了，都没写过博客了。。。最近做了两个活动，两个活动中对于在页面跳转之后返回，都需要保留原页面的一些状态。于是总结一下。

页面状态描述

例如，一个页面中某个模块，有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.加多些从新请求数据的判断，例如，当某个接口的数据不对应时，所有接口都需要重新请求等。