我不确定这是否可能,但我希望有人能指引我朝着正确的方向前进,实现我想要实现的目标。
我正在围绕twitter上的bootstrap建立一个网站;我在剖面框上使用引导折叠。默认情况下,此框不会折叠,但如果用户按下按钮并折叠该框;我希望这些信息即使在页面刷新后也能存储在客户端的某种缓存中。
假设用户将它们折叠,并在明天返回;则它们仍将被折叠,直到用户再次按下按钮为止。
我不会包括我的任何代码,因为我怀疑这不仅仅是添加的类(我无论如何都使用默认的类),我也不能链接到项目,因为它在我们的intranet之外不可用。
不过,这是jsfiddle上bootstrap的副本。
http://jsfiddle.net/B43hy/
如有任何帮助,我们将不胜感激。提前谢谢。
您可以尝试使用cookie或HTML5 LocalStorage。这两种机制都存储客户端数据。您应该选择其中一个(在cookie的情况下,编写一个get/set函数)。
然后你需要给每个collapse元素一个在整个网站上唯一的id,这样它就不会与其他页面上的任何元素冲突。每次用户折叠元素时,都会将id保存在客户端上。每次用户取消折叠某个元素时,都会从存储中删除该id。你可以使用Bootstrap抛出的事件,比如:
$('.collapse').on('hidden', function() {
// store this.id
}).on('shown', function() {
// delete this.id
});
当您加载页面时,在$( document ).ready
函数中,您应该添加以下检查:
$(document).ready(function(){
$(".collapse").collapse().each(function(){
if( isStored( this.id ) ) {
$( this ).collapse( 'hide' );
}
});
});
这将检查是否应该关闭任何collapse元素,如果应该,则隐藏它们。isStored
方法应该是检查cookie或LocalStorage以查看id是否存在的方法。
如果你的网站上有很多这样的崩溃,那么你可能会为它们使用很多id。在这种情况下,cookie可能是一个糟糕的选择,因为它们会在每次请求时被传输到服务器,从而在没有实际目的的情况下减慢连接速度。LocalStorage没有受到这个缺陷的影响,总体上更容易使用,但(像许多HTML5功能一样)它只适用于较新的浏览器。
我使用jQuery存储api插件,它允许您放入cookie、本地存储、命名空间和会话存储。
我的代码很容易记住Bootstrap崩溃字段的状态:
// Open/close the collapse panels based on history
var storage = $.localStorage;
$('.collapse').on('hidden.bs.collapse', function () {
storage.remove('open_' + this.id);
});
$('.collapse').on('shown.bs.collapse', function () {
storage.set('open_' + this.id, true);
});
$('.collapse').each(function () {
// Default close unless saved as open
if (storage.get('open_' + this.id) == true) {
$(this).collapse('show');
}
});