如何将单击事件存储在本地存储中,以便在页面刷新后使用。
const container = document.querySelector('.filter ul');
container.addEventListener('click',(event) =>{
const closest = event.target.closest('.accordion-header');
if (!closest) return;
closest.classList.add('active');
closest.nextElementSibling.classList.add('active');
});
<div class = "filter">
<ul>
<li>
<h4 class = ""> Accordion </h4>
<p> Hello,world </p>
</li>
</ul>
</div>
2条答案
按热度按时间gj3fmq9x1#
听起来您并没有试图存储单击(事件),而是存储了该项目已被单击的事实,并通过页面刷新来存储它。
在单击处理程序中,需要添加一行代码,将单击状态存储到本地存储中。
注意localStorage只存储字符串,这里我们在sotrage中存储了一个名为
itemClicked
的项,并将其赋值为true
。在页面加载时,您需要检查本地存储并再次对元素运行
classList.add('active')
。igetnqfo2#
你可以使用localStorage API,你可以在本地存储中保存每个可折叠头及其兄弟的活动类的状态,这样你就可以在页面刷新后检索它。