关于保留页面状态的一些总结 JS实现页面进入、返回定位到具体位置

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

页面状态描述

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