解决浏览器返回页面刷新问题

1.常见场景

倒计时、弹框等场景。

2.涉及到的知识点

• sessionStorage：1）遵循同源策略；2）用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据
• onpageshow：在用户访问页面时触发
• onpagehide：在用户离开当前网页跳转到另外一个页面时触发
• reload：重新加载当前文档
• 要考虑部分浏览器不支持sessionStorage、onpageshow和onpagehide

3.js代码（先引入jquery）

 $(function () {
        //判断浏览器支不支持
        if (('sessionStorage' in window) && ('onpageshow' in window)) {
            var suffix = '_has_show';

            window.addEventListener('pageshow', function () {
                var temp = window.sessionStorage.getItem(location.href);
                if (temp != null && temp != undefined && temp != '') {
                    window.sessionStorage.removeItem(location.href);
                    //防止无限刷新页面，因为reload先触发onpagehide，然后再触发onpageshow
                    window.sessionStorage.setItem(location.href + suffix, location.href);
                    window.location.reload();
                }
            });

            window.addEventListener('pagehide', function () {
                var temp = window.sessionStorage.getItem(location.href + suffix);
                if (temp == null || temp == undefined || temp == '') {
                    window.sessionStorage.setItem(location.href, location.href);
                } else {
                    window.sessionStorage.removeItem(location.href + suffix);
                }
            });
        }
        
    });