切换 DIV 状态本地存储

Question

今天早些时候我在这里问了一个问题，但没有正确解释，也没有提供正确的代码。

我有 2 个切换 DIVs，里面有 links，一旦用户打开一个并点击 link，页面刷新并显示结果，但是 DIV 自行关闭。我希望它保持开放状态。

$(document).ready(function() {
            $(".content").hide();
            $(".fa-angle-double-up").hide();
            $(".heading").click(function(){
                    $(this).next(".content").slideToggle(500);
                    $(this).find(".fa-angle-double-up, .fa-angle-double-down").toggle();
            });
        });

有人告诉我可以通过设置 cookie 或将其存储到 localstorage 来完成，但我不知道（JS 新手）。如果有人能提供帮助，你会拯救我的一天:)

Fiddle: http://jsfiddle.net/eg7ju4rm/

版主，如有违规post同题2题，敬请见谅

Answer 1

在您的点击事件中，您可以添加：

var id = $(this).parent().attr('id');
window.localStorage.setItem('opened', id);

保存打开的部分ID。并将其添加到您的现成处理程序中：

var opened =  window.localStorage.getItem('opened');
if(opened !== ''){
    $('#' + opened).find('.content').show();
}

Demo

我不知道是只有一个 div 应该保持打开还是每个打开 div，我的解决方案只处理一个打开的 div。

Answer 2

您确实可以在 localStorage 中存储对扩展元素的引用（或者 sessionStorage 可能更合适），并在页面加载时恢复它们的状态：

$(document).ready(function() {
    var openTabs = [];

    $(".content").hide();
    $(".fa-angle-double-up").hide();

    $(".heading").click(function(){
        var $this = $(this),
        selector = '#' + $this.parent().attr('id') + ' .heading';

        if ($(this).next('.content').is(':visible'))
        {
            var pos = openTabs.indexOf(selector);
            openTabs.splice(pos, 1);
        }
        else
            openTabs.push(selector);

        localStorage.openTabs = openTabs.join(',');

        $this.next(".content")
             .slideToggle(500)
             .find(".fa-angle-double-up, .fa-angle-double-down")
             .toggle();
    });

    if (localStorage.openTabs)
        $(localStorage.openTabs).click();
});

Fiddle

另外，参见 DOM Storage

切换 DIV 状态本地存储

Toggle DIV state localstorage

jquery

toggle

local-storage