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

Question

我不确定这是否可行,但我希望有人能指引我朝着正确的方向努力实现我想要实现的目标.

我正在建立一个关于bootstrap的网站; 我在节框上使用bootstrap collapse.默认情况下,此框不会折叠,但如果用户按下按钮并折叠框; 我希望这些信息即使在页面刷新后也存储在客户端的某种缓存中.

假设用户将其折叠,并明天返回; 然后他们仍然会折叠,直到用户再次按下按钮.

我不会包含任何代码,因为我怀疑除此之外还有更多的代码(我还是使用默认代码),也不能链接到项目,因为它在我们的Intranet之外是不可用的.

不过,这里是jsfiddle的bootstrap副本.

http://jsfiddle.net/B43hy/

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

Answer 1

您可以尝试使用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功能一样)它只适用于较新的浏览器.