如何在 sessionStorage 中存储折叠？

Question

I have few collapse and i want to store on localStorage as per user activity.我几乎没有崩溃，我想根据用户活动存储在 localStorage 上。 Right now its not working properly.现在它不能正常工作。 How can i do it?我该怎么做？

This is my code:-这是我的代码：-

 $('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

As you want to store which elements the user has collapsed, you could store the index of the H5 in session storage.当您要存储用户折叠的元素时，您可以将H5的索引存储在会话存储中。

To fetch the index within the click() function, use the jQuery index() function:要在click()函数中获取索引，请使用 jQuery index()函数：

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

To store the click to localstorage:要将点击存储到本地存储：

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

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

Lastly to collapse the elements from sessionStorage, just loop over all the elements and read the index as:最后要折叠 sessionStorage 中的元素，只需遍历所有元素并将索引读取为：

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

In order to use localStorage , rename window.sessionStorage to window.localStorage为了使用localStorage ，将window.sessionStorage重命名为window.localStorage

Answer 2

if i understand and you want to store and use as a cache try this code:如果我理解并且您想存储和用作缓存，请尝试以下代码：

   <!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>

I hope this help you Regards我希望这对你有帮助

如何在 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