persist.js 浏览器ajax数据跳转持久插件，适用于ajax动态分页加载数据后点击进入新页面再返回数据依然存在-BFW插件库

persist.js 浏览器ajax数据跳转持久插件，适用于ajax动态分页加载数据后点击进入新页面再返回数据依然存在

下面我们来演示一下

当我们通过ajax动态加载更多评论后，点击其中一个评论，浏览器跳转到新的页面，此时我们再返回，依然会停在跳转前的页面和数据

<!DOCTYPE>
    <html>
    <head>
        <style>
            body {
                margin: 0;
            }
            .content {
                font-family: sans-serif;
                margin: 5px;
                padding: 1px 15px;
                background-color: rgba(0,0,0,.07);
                border-radius: 3px;
            }
            .content h1 {
                font-size: 20px;
            }
            .content p {
                font-size: 14px;
            }
            .comment {}

            .loadCmtBtn {
                border: none;
                background: rgba(0,0,0,0.05);
                width: 100%;
                height: 36px;
                line-height: 36px;
                vertical-align: middle;
                font-family: sans-serif;
                outline: none;
            }
            .avatar {
                background-image: url(./assets/img/user.png);
                width: 40px;
                height: 40px;
                border-radius: 46px;
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
                background-color: rgba(0,0,0,.2);
                color: black;
                float: left;
                margin-top: 15px;
                margin-right: 15px;
            }

            .link {
                display: block;
                color: gray;
                border: none;
                background: rgba(0,0,0,0.05);
                width: 100%;
                height: 36px;
                margin-top: 5px;
                margin-bottom: 5px;
                line-height: 36px;
                vertical-align: middle;
                font-family: sans-serif;
                outline: none;
                text-align: center;
            }
        </style>
        <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
        <script type="text/javascript">
            bready(function() {

                use(["persist.min"], function() {
                    var persist = new eg.Persist("commentModule");

                    $(".loadCmtBtn").on("click", function() {
                        // Make change to the component. (append comments)
                        $(".commentContainer").append("<div class=\"content comment\"><div class=\"avatar\" style=\"background-image: url(./assets/img/user.png)\"></div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt</p></div>");

                        // Save snapshot of the component when there is a change
                        var snapshot = $(".commentContainer").html();
                        persist.set("commentsHTML", snapshot);
                    });

                    // Restore state when initiate component
                    if (persist.get("") !== null) {
                        var commentsHTML = persist.get("commentsHTML");

                        $(".commentContainer").html(commentsHTML);
                    }
                });


            });
        </script>

    </head>
    <body>
        <div class="content">
            <h1>演示persist插件</h1>
            <p>
                这个页面动态加载数据后，你可以跳转到新页面，然后再通过浏览器返回后，数据也然存在，不会存在丢失，但是刷新肯定丢失
            </p>
        </div>
        <div class="commentContainer">


            <button class="loadCmtBtn">加载更多</button>
            <a class="link" href="http://one.bfw.wiki/">跳转到新一页</a>

        </body>
    </html>

官网 https://naver.github.io/egjs-persist/