笔记-返回到前一个页面时显示前一个页面中ajax获取的数据

Posted 2020-09-19 ZhangCui

笔记第一部分：http://www.cnblogs.com/zczhangcui/p/6869219.html

在第一部分遇到的问题是，用ajax获取了一系列列表信息后，拼接好html后插入到了原有页面中，类似于一系列新闻列表，点击查看详情后再返回到这一页，会出现所有ajax获取并插入页面的结构都没有了，经过调研，决定尝试从history对象入手。

我使用了history.replaceState方法来改变当前页面的state，每次ajax获取信息后，将页面中希望保留的内容放入state中，当返回到这个页面中时，读取state中的信息，如果state不为null，那么将state中的页面结构展示出来。

步骤很简单，大概分两步：

1、ajax获取信息并拼装到html结构后，将希望保留的html结构放入state中

history.replaceState({current_html: $(\'.page\').html()}, \'\', \'\');

一些必须的又不是很重要的信息，可以保存在html中的一个地方，需要用到的时候再读取。比如我就把当前的页数信息保存在html中，这样当返回到这一页中时，我可以读取这个页数信息，通过ajax向服务器请求下一页。

2、返回这个页面的时候，查看state是否保存有信息，如果有就展示出来

var prev_html = history.state && history.state.current_html;
if (prev_html) {
    $(\'.page\').html(prev_html);
}

这样就基本实现了返回后依然显示之前ajax请求而得到的信息。

 

但是尝试使用后，发现另一个问题，我滚到到页面中间的某个地方，点击某一条进入详情页面，然后我点击返回回到这一页，虽然依然是之前的那些结构，但是没有滚动到我之前浏览的地方。

最终我的解决办法是进入详情页之前，在sessionStorage中临时保存一个浏览位置的信息，具体实现有一点小bug，之后再看看有没有更好的办法。