javascript - 保留动态加载的 HTML 元素，以防单击浏览器 "Back"或 "Forward"按钮

Question

(我阅读了一些关于这个主题的主题，但没有找到有效的解决方案。)

在我的页面上，我有一个“加载更多”按钮，它会触发 Ajax 调用以获取要显示的项目的新部分。当用户到达不同的页面然后点击浏览器的“后退”或“前进”按钮时，我想保留这些动态附加的元素 - 但是我无法让它工作。

我尝试设置 cache: true对于 jQuery $.ajax()要求。我还在请求中尝试了“Expires”和“Cache-Control” header ，但没有成功。我考虑将动态内容保留在 <input type="hidden"> 中听onLoad我的 jQuery 脚本中的事件。

关于每次动态加载时如何保留/缓存附加元素的任何建议？

更新: 我需要“记住”的是 HTML 结构，因此可能有很多字符(想象一下如果用户点击“加载更多”10 次然后离开页面)。因此需要考虑任何存储的大小。

Answer 1

这是我上面评论的一个例子。我认为，就您而言，它很有用。如果这种方式不可行，您应该考虑使用服务器端解决方法。 Check jsFiddle .

$(function(){

    var clicked_times = 0;

    $('button').on('click', function(){
        // ajax....
        // ajax success:
        clicked_times++;
        $('<p>new content</p>').insertBefore($(this));
    });

    window.onbeforeunload = function(){
        if( clicked_times > 0 ) Cookies.Set('reload_contents', clicked_times);
    };

    if( Cookies.Check('reload_contents') ){
        var times = Cookies.Get('reload_contents');
        for( var i = 0; i < times; i++){
            $('button').trigger('click');
        }
        Cookies.Set('reload_contents', '', -1);
    }

});

/** Cookie methods */
var Cookies = {

    Check: function (name) {
        return !!this.Get(name);
    },

    Get: function (name) {
        var n, ca, c;
        n = name + "=";
        ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            c = ca[i].trim();
            if (c.indexOf(name) === 0) return c.substring(name.length + 1, c.length);
        }
        return false;
    },

    Set: function (name, value, expire, options) {
        var d = new Date(), expires;
        var defaults = { expire_in: 'days', path: '/' };
        if (typeof options !== "undefined") $.extend(true, defaults, options);
        if (expire !== undefined && expire !== null) {
            if (defaults.expire_in == 'days') d.setDate(d.getDate() + expire);
            else if (defaults.expire_in == 'minutes') d.setDate(d.getTime() + expire * 1000);
            else {
                return false;
            }
            expires = "expires=" + d.toGMTString();
        }
        else expires = expires = "";
        document.cookie = name + "=" + value + "; " + expires + '; path=' + defaults.path;
        return true;
    }

};