Локальное хранилище не хранит состояние нескольких slideToggle

Question

Я хочу создать множественное вертикальное меню с помощью slideToggle и сохранить состояние переключателя в локальном хранилище, я не понимаю, почему это состояние не сохраняется.

Я нашел этот пример (https://codepen.io/johnyrodni/pen/VVMXJx), который работает, но когда я пытаюсь применить его к своим реальным потребностям (https://codepen.io/azyme/pen/PrGNpW), локального хранилища больше нет.

<div id="dropdown-1">
        <div class="heading">
      Click me
        </div>

            <ul class="content">
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
        </ul>
</div>

<div id="dropdown-2">
        <div class="heading">
      Click me
        </div>

            <ul class="content">
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
        </ul>
</div>

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


    $(".content").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();

    });

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

Я ожидаю, что состояние переключателей будет храниться в локальном хранилище

Answer 1

Это должно исправить.

Заменить эту строку:

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

с этим:

localStorage.setItem('openTabs', JSON.stringify(openTabs.join(',')))

и этот:

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

с этим:

if (localStorage.hasOwnProperty('openTabs'))
     $(JSON.parse(localStorage.getItem('openTabs'))).click();