通过JS添加的CSS类在浏览器会话期间保留

Question

现在，在网站刷新后或进入子页面时，会删除onclick添加的这个类。我的脚本需要什么行才能让这个类在浏览器会话期间保持活动状态？

<script type="text/javascript">
function myFunction()
{
    document.getElementById('box').setAttribute("class", "contrast");

}
  </script>

Answer 1

使用JS向页面添加某些类或元素时，刷新页面或关闭/重新打开页面时，它将消失。这是正常行为。

要存储更长时间的信息，您可以使用localStorage或sessionStorage：

只有当您关闭浏览器时才会清除
• sessionStorage.setItem
• localStorage.setItem将“永久”存储信息。

以下是介绍文章：

• sessionStorage
• localStorage

要存储一些信息，请使用：

sessionStorage.setItem('key', 'value');

然后，当您的页面加载时，您可以读取存储的值并添加适当的类：

var data = sessionStorage.getItem('key');
if (data) {
    document.querySelector(yourselector).className = 'yourclass';
}