gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 00:30:25 30 4
gpt4 key购买 nike

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

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

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

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

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

最佳答案

这是我上面评论的一个例子。我认为,就您而言,它很有用。如果这种方式不可行,您应该考虑使用服务器端解决方法。 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;
}

};

关于javascript - 保留动态加载的 HTML 元素,以防单击浏览器 "Back"或 "Forward"按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29792829/

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com