如何在 sessionStorage 中存储折叠？

Question

我几乎没有崩溃，我想根据用户活动存储在 localStorage 上。 现在它不能正常工作。 我该怎么做？

这是我的代码：-

 $('p').addClass(sessionStorage.getItem('className')); $('h5').click(function(){ $(this).next('p').toggleClass('active'); window.sessionStorage.setItem('className', 'active'); });

 p{display:none;} p.active{display:block;}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h5>collapse 1</h5> <p>This is collapse data</p> <h5>collapse 2</h5> <p>This is collapse data</p> <h5>collapse 3</h5> <p>This is collapse data</p> <h5>collapse 4</h5> <p>This is collapse data</p>

Answer 1

当您要存储用户折叠的元素时，您可以将H5的索引存储在会话存储中。

要在click()函数中获取索引，请使用 jQuery index()函数：

$('p').index(
  $(this).next('p')
)

要将点击存储到本地存储：

$('h5').click(function(){
   const paragraphElement = $(this).next('p');
   const elementIndex = $('p').index(paragraphElement);

   paragraphElement.toggleClass('active');
   window.sessionStorage.setItem('collapsed_state_' + elementIndex , 'active'); 
});

最后要折叠 sessionStorage 中的元素，只需遍历所有元素并将索引读取为：

$('p').each(function(index) {
  $(this).addClass(window.sessionStorage.getItem('collapsed_state_' + index));
});

为了使用localStorage ，将window.sessionStorage重命名为window.localStorage

Answer 2

如果我理解并且您想存储和用作缓存，请尝试以下代码：

   <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        p {
            display: none;
        }

            p.active {
                display: block;
            }
    </style>

</head>
<body>
    <h5 id="collapse1">collapse 1</h5>
    <p class="collapse1">This is collapse data</p>

    <h5 id="collapse2">collapse 2</h5>
    <p class="collapse2">This is collapse data</p>

    <h5 id="collapse3">collapse 3</h5>
    <p class="collapse3">This is collapse data</p>

    <h5 id="collapse4">collapse 4</h5>
    <p class="collapse4">This is collapse data</p>

    <script>
        var classOpen = sessionStorage.getItem('className');

        $('p.' + classOpen).addClass('active');

        $('h5').on("click", function () {
            $('p').removeClass('active');

            $(this).next('p').toggleClass('active');

            var idKey = $(this).attr("id");

            window.sessionStorage.clear();
            window.sessionStorage.setItem('className', idKey);
        });
    </script>
</body>
</html>

我希望这对你有帮助

如何在 sessionStorage 中存储折叠？

问题描述

2 个解决方案

解决方案1
1 2020-02-09 20:28:16

解决方案2
1 2020-02-09 20:50:01

如何在 sessionStorage 中存储折叠？

问题描述

2 个解决方案

解决方案1 1 2020-02-09 20:28:16

解决方案2 1 2020-02-09 20:50:01

解决方案1
1 2020-02-09 20:28:16

解决方案2
1 2020-02-09 20:50:01