2

我不确定这是否可能,但我希望有人能指引我朝着正确的方向前进,以实现我希望实现的目标。

我正在从 twitter 建立一个围绕 bootstrap 的网站;我在节框上使用引导折叠。默认情况下,此框不折叠,但如果用户按下按钮并折叠该框;即使在页面刷新后,我也希望将此信息存储在客户端的某种缓存中。

假设用户折叠它们,并在明天返回;那么它们仍然会被折叠,直到用户再次按下按钮。

我不会包含我的任何代码,因为我怀疑这不仅仅是添加的类(我还是使用默认的类),我也无法链接到该项目,因为它在我们的 Intranet 之外不可用。

不过,这是 jsfiddle 上的 bootstrap 的副本。

http://jsfiddle.net/B43hy/

任何帮助,将不胜感激。提前致谢。

4

2 回答 2

14

您可以尝试使用cookie或 HTML5 LocalStorage。这两种机制都存储客户端数据。您应该选择其中一个(如果是 cookie,请编写一个 get/set 函数)。

然后你需要给每个折叠元素一个在整个站点中唯一的 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' );
        }
    });
});​

这将检查是否应该关闭任何折叠元素,如果是则隐藏它们。该isStored方法应该是检查 cookie 或 LocalStorage 以查看 id 是否存在的方法。

如果您的网站上有很多此类折叠,那么您可能会为它们使用很多 id。在这种情况下,cookie 可能是一个糟糕的选择,因为它们会在每次请求时传输到服务器,从而在没有真正目的的情况下减慢连接速度。LocalStorage 不受此缺陷的影响,并且总体上更易于用户使用,但是(与许多 HTML5 功能一样)它仅适用于较新的浏览器。

于 2012-08-05T17:52:52.033 回答
1

我使用jQuery storage 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');
        }
    });
于 2015-09-11T04:37:58.633 回答