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

 

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: function() {
                return 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 || document.documentElement.scrollTop || window.pageYOffset;    //兼容滚动条高度
                this.container.setItem(`${this.page_type()}_scroll_top`, cur_scroll);
            },
            saveOther: function(other) {
                Object.keys(other).map(item => {
                    this.container.setItem(`${this.page_type()}_${item}`, other[item]);
                });
            },
            saveBackInfo: function(page, other) {
                this.savePage(page);
                this.saveScroll();
                if(typeof other === 'object'){
                    this.saveOther(other);
                }
            },
            isBack: function(other) {
                let cur_page = this.container.getItem(`${this.page_type()}_page`);
                let cur_scroll = this.container.getItem(`${this.page_type()}_scroll_top`);
                if(typeof other === 'object'){
                    Object.keys(other).map(item => {
                        other[item] = this.container.getItem(`${this.page_type()}_${item}`);
                        this.container.removeItem(`${this.page_type()}_${item}`);
                    });
                }
                let result = {};
                if(cur_page){
                    this.container.removeItem(`${this.page_type()}_page`);
                    this.container.removeItem(`${this.page_type()}_scroll_top`);
                    result = {
                        page: parseInt(cur_page),
                        scroll_top: parseInt(cur_scroll),
                    };
                    if(typeof other === 'object'){
                        Object.keys(other).map(item => {
                            result[item] = other[item];
                        });
                    }
                }else{
                    result = {};
                }
                return result;
            },
        }
        // 回到记录的滚动位置
        Vue.prototype.scrollToHistory = (scroll) => {
            document.body.scrollTop = document.documentElement.scrollTop = window.pageYOffset = scroll;
        }
    }
}

 

list.vue:

export default {
    data() {
        return {
            list: [],
            page: 1,
            category: '',    //额外的信息
            history: {}, //保存的记录
        }
    },
    created() {
        this.history = this.SEstorage.isBack({category: this.category});    //获取到记录
        this.category = this.history.category;
        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(() => this.scrollToHistory(this.history.scroll_top));
                }
            });
        },
        // 跳转到内容页面时，保存阅读记录
        toAudioList(_id) {
            this.SEstorage.saveBackInfo(this.page, {category: this.category});
            this.$router.push({ path: './next_page', query: { _id: _id } });
        },
    }
}