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 回答