关于保留页面状态的一些总结
好吧,最近真的是太忙懒了,都没写过博客了。。。最近做了两个活动,两个活动中对于在页面跳转之后返回,都需要保留原页面的一些状态。于是总结一下。
页面状态描述
例如,一个页面中某个模块,有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.加多些从新请求数据的判断,例如,当某个接口的数据不对应时,所有接口都需要重新请求等。