存储在HTML5存储中的引导崩溃的当前状态

Current state of bootstrap collapse stored in HTML5 Storage

本文关键字：存储 状态 崩溃 HTML5      更新时间：2023-09-26

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

我正在围绕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');
        }
    });
相关文章：