Javascript 如何在会话存储中存储崩溃？_Javascript_Jquery_Html_Css

Javascript 如何在会话存储中存储崩溃？

javascript jquery html css

Javascript 如何在会话存储中存储崩溃？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我几乎没有崩溃，我希望根据用户活动存储在本地存储上。现在它不能正常工作。我怎么做这是我的代码：- $（'p'）.addClass（sessionStorage.getItem（'className'））； $（'h5'）。单击（函数（）{ $（this）.next（'p'）.toggleClass（'active'）； setItem（'className'，'active'）； }); p{display:none；} p、活动{display:block；} 崩溃1 这是折叠数据崩

我几乎没有崩溃，我希望根据用户活动存储在本地存储上。现在它不能正常工作。我怎么做

这是我的代码：-

$（'p'）.addClass（sessionStorage.getItem（'className'））；
$（'h5'）。单击（函数（）{
$（this）.next（'p'）.toggleClass（'active'）；
setItem（'className'，'active'）；
});
p{display:none；}
p、 活动{display:block；}

崩溃1
这是折叠数据
崩溃2
这是折叠数据
崩溃3
这是折叠数据
崩溃4
这是折叠数据
当您要存储用户已折叠的元素时，您可以将H5
的索引存储在会话存储中
要获取函数中的索引，请使用jQuery函数：
$（'p'）。索引(
$（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'）。每个（函数（索引）{
$（this.addClass（window.sessionStorage.getItem（'collapsed_state_'+index））；
});

若要使用，请将window.sessionStorage
重命名为window.localStorage
，因为要存储用户已折叠的元素，您可以在会话存储中存储H5
的索引
要获取函数中的索引，请使用jQuery函数：
$（'p'）。索引(
$（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'）。每个（函数（索引）{
$（this.addClass（window.sessionStorage.getItem（'collapsed_state_'+index））；
});

若要使用，请将window.sessionStorage
重命名为window.localStorage
，如果我理解并且您希望存储并用作缓存，请尝试以下代码：
   <!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>


p{
显示：无；
}
p、 活跃的{
显示：块；
}
崩溃1
这是折叠数据
崩溃2
这是折叠数据
崩溃3
这是折叠数据
崩溃4
这是折叠数据
var classOpen=sessionStorage.getItem（'className'）；
$（'p.+classOpen）.addClass（'active'）；
$（'h5'）。在（“单击”上，函数（）{
$（'p'）.removeClass（'active'）；
$（this）.next（'p'）.toggleClass（'active'）；
var idKey=$（this.attr（“id”）；
window.sessionStorage.clear（）；
setItem（'className'，idKey）；
});

我希望这对你有帮助
关于
如果我理解并且您想存储并用作缓存，请尝试以下代码：
   <!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>


p{
显示：无；
}
p、 活跃的{
显示：块；
}
崩溃1
这是折叠数据
崩溃2
这是折叠数据
崩溃3
这是折叠数据
崩溃4
这是折叠数据
var classOpen=sessionStorage.getItem（'className'）；
$（'p.+classOpen）.addClass（'active'）；
$（'h5'）。在（“单击”上，函数（）{
$（'p'）.removeClass（'active'）；
$（this）.next（'p'）.toggleClass（'active'）；
var idKey=$（this.attr（“id”）；
window.sessionStorage.clear（）；
setItem（'className'，idKey）；
});

我希望这对你有帮助
关于
为什么不使用window.localStorage？我可以使用但不工作如何使用window.localStorage？为什么不使用window.localStorage？我可以使用但不工作如何使用window.localStorage？它可以工作，但一次只能使用一个，实际上，用户也可以一次打开多个折叠…它可以工作，但一次只能打开一个，实际上用户也可以一次打开多个折叠…当它展开时工作正常，但当它折叠时，它不会保存在会话存储中，我还需要在收拢时从sessionStorage中删除活动类展开时工作正常，但在收拢时未保存在sessionStorage中，我还需要在收拢时从sessionStorage中删除活动类