javascript - 如何在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 的索引存储在 session 存储中。

获取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