如何使用Localstorage在点击时显示容器？

Question

我正在尝试显示具有本地存储的点击容器。我的意思是，当您单击按钮时，CSS类：is-hidden和is-visible将被浏览器保存并记住。

这是我的代码：

var comments = document.getElementById("js-comments");
if (comments) {
    comments.addEventListener("click", function() {
        localStorage.setItem('comments', 'true');
        comments.classList.add("is-hidden");
        var container = document.getElementById("js-comments__inner");
        container.classList.add("is-visible");
        if (localStorage.getItem('comments') == 'true') {
            container.classList.add("is-visible");
        }
    });
}

HTML标记：

<div class="comments">
                    <button class="comments__button" id="js-comments">Load comments</button>
                    <div class="comments__inner" id="js-comments__inner">
                        <h3  class="h4">Comments</h3>
                    </div>
                </div>

想法是：当您单击button和comments__inner元素时，它们会收到CSS分类。