使用session做回退保留的操作

Posted 2020-12-04 bgweizheng

        $("body").click(function () {

            // 点击页面时,把页面信息,scrollTop存入session中

            var key_html = document.documentElement.outerHTML;

            var key_html2 = window.location.href;

            var key_scrollTop = document.body.scrollTop;

            sessionStorage.setItem(‘key_html‘, key_html);

            sessionStorage.setItem(‘key_html2‘, key_html2);

            sessionStorage.setItem(‘key_scrollTop‘, key_scrollTop);

            // alert(key_html)

            // alert(document.body.scrollTop)

            console.log(key_html)

            console.log(document.body.scrollTop)

        });

        function onReady() {

//取出存入的session,渲染到页面中

            var key_html3 = window.location.href;

            bodyhtml = sessionStorage.getItem(‘key_html‘);

            bodyhtml2 = sessionStorage.getItem(‘key_html2‘);

            bodyScrollTop = sessionStorage.getItem(‘key_scrollTop‘);

            // alert(‘bodyhtml:‘+bodyhtml);

            // alert(‘bodyScrollTop:‘+bodyScrollTop)

            console.log(document.documentElement.outerHTML)

            console.log(bodyScrollTop)

            if(bodyhtml2==key_html3){

                if (bodyhtml != null) {

                    setTimeout(function () { $("body").html(bodyhtml) }, 200);

                    // setTimeout(function () { $("body").html(bodyhtml) }, 200);

                    sessionStorage.removeItem(‘key_html‘);

        

                }

                if (bodyScrollTop != null) {

                    setTimeout(function () { $("body").scrollTop(bodyScrollTop) }, 500);

                    sessionStorage.removeItem(‘key_scrollTop‘);

                }

            }

    

        }

        onReady();

 

注意:上面代码中我在session中存了当前的页面的地址,最后做了一个判断 bodyhtml2==key_html3  ,有时候点击下一个页面的a链接时,也会跳到回退渲染的页面中,所以加了这个判断(判断存入的地址和当前地址是否相同)