详情页返回列表内容缓存及定位实现

最新推荐文章于 2023-08-25 15:53:21 发布

置顶

思与学

最新推荐文章于 2023-08-25 15:53:21 发布

阅读量2.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端详情页返回列表定位

本文链接：https://blog.csdn.net/u014411966/article/details/78094347

本文介绍了如何实现在前端中，从详情页返回列表时保持内容缓存并精确定位。利用sessionStorage缓存列表数据，记录文章ID，返回时检查缓存，使用IScroll进行元素定位。这种方法适用于处理返回时页面不刷新和焦点定位的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现目标

当前浏览到第N页，点击某一个新闻，进入新闻详情页，点击返回时，列表数据不重新加载，焦点仍定位在进入详情页之前的位置。

思路

缓存列表内已展示的数据；
进入详情页时在缓存内添加该新闻的ID（键为articleId）；
返回时在js内判断缓存内是否包含articleId，如果存在，则通过缓存的列表数据进行页面渲染；
通过articleId定位元素，滚动窗口值该元素处；
缓存不能始终存在。

根据当前项目情况，考虑缓存放入sessionStorage，滚动窗口使用IScroll。

实现方案

1、缓存列表数据

//cacheKey 缓存key  cacheValue 缓存内容json结构  position 值为before和after分别用于加载最新和加载下一页 
function addToCache(cacheKey,cacheValue,position){
    cacheValue = JSON.stringify(cacheValue);
    var allCacheData = sessionStorage.getItem(cacheKey);
    if(allCacheData != null){
        if(position == "before"){
            allCacheData = cacheValue + "::::" +allCacheData;
        } else {
            allCacheData = allCacheData + "::::&#

最低0.47元/天解锁文章