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