返回上一页时，保存恢复浏览记录（模拟返回不刷新）

Posted 2020-10-13 参与商

 

sessionStorage：

　　与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。在新标签或窗口打开一个页面会初始化一个新的会话。

大致思路：

1. 用户在点击新的链接时，保存上一页的信息（包括页码、滚轮位置、页面标识符等，建议保存于sessionStorage）；
2. 在打开上一页时先做判断，是否有保存过当页的记录；
3. 如果有记录：删除记录 => 重新定义页码 => 获取数据 => 渲染页面 => 移动滚轮位置；
4. 如果没有记录：从第一页开始显示；

主要代码：

common.js:

import Vue from ‘vue‘

export default {
    install(Vue, options) {
        Vue.prototype.SEstorage = {
            page_type: window.location.hash.split(‘?‘)[0],
            container: window.sessionStorage,
            savePage: function(page) {
                let cur_page = parseInt(page) || 1;
                this.container.setItem(`${this.page_type}_page`, cur_page);
            },
            saveScroll: function() {
                var cur_scroll = document.body.scrollTop;
                this.container.setItem(`${this.page_type}_scroll_top`, cur_scroll);
            },
            saveBackInfo: function(page) {
                this.savePage(page);
                this.saveScroll();
            },
            isBack: function() {
                let cur_page = this.container.getItem(`${this.page_type}_page`);
                let cur_scroll = this.container.getItem(`${this.page_type}_scroll_top`);
                if (cur_page) {
                    this.container.removeItem(`${this.page_type}_page`);
                    this.container.removeItem(`${this.page_type}_scroll_top`);
                    return {
                        page: parseInt(cur_page),
                        scroll_top: parseInt(cur_scroll),
                    };
                } else {
                    return {};
                }
            },
        }
    }
}

list.vue:

export default {
    data() {
        return {
            list: [],
            page: 1,
            history: {}, //保存的记录
        }
    },
    created() {
        this.history = this.SEstorage.isBack();    //获取到记录
        this.page = this.history.page || this.page;    //修改page
        this.getList();    //获取数据
    },
    methods: {
        getList() {
            this.axios.get(`${this.APIURL}?page=${this.page}`).then(resp => {
                this.list = resp.data.data;
                // 恢复滚轮保存的位置，这里dom渲染是个一部的过程，所以写在nextTick的回调里面
                if (this.history.page) {
                    this.$nextTick(() => document.body.scrollTop = this.history.scroll_top);
                }
            });
        },
        // 跳转到内容页面时，保存阅读记录
        toAudioList(_id) {
            this.SEstorage.saveBackInfo(this.page);
            this.$router.push({ path: ‘./next_page‘, query: { _id: _id } });
        },
    }
}