使用Javascript/Jquery从LocalStorage激活类

我有两个div，其中一个有

是活动的

类，我试图实现的是，当用户单击div时，它会将活动类的值保存在localstorage中，因此当用户重新加载页面时，它需要在单击的div上有活动类。这是我的密码

jQuery（文档）.ready（函数（$）{
if（localStorage.getItem（'user'）=='aaa'）{
$（“.form wrapper”）.addClass（“处于活动状态”）；
}
$（'.student'）。单击（函数（）{
setItem（'user'，'student'）；
;
$（'.form wrapper'）.removeClass（'is-active'）；
$（this.addClass（'is-active'）；
});
$（“.teacher”）。单击（函数（）{
setItem（'user'，'teacher'）；
$（'.form wrapper'）.removeClass（'is-active'）；
$（this.addClass（'is-active'）；
});
});
。处于活动状态{
背景色：红色；
宽度：40px；
高度：40px
}
.老师{
背景颜色：灰色；
宽度：40px；
高度：40px
}
我对代码做了一些更改



jQuery（文档）.ready（函数（$）{
if（localStorage.getItem（'user'）=='student'）{
$（“.form wrapper div”）.removeClass（“处于活动状态”）；
$（“.form wrapper.student”）.addClass（“处于活动状态”）；
}
if（localStorage.getItem（'user'）='teacher'）{
$（“.form wrapper div”）.removeClass（“处于活动状态”）；
$（“.form wrapper.teacher”）.addClass（“处于活动状态”）；
}
$（'.student'）。单击（函数（）{
setItem（'user'，'student'）；
$（'.form wrapper div'）.removeClass（'is-active'）；
$（this.addClass（'is-active'）；
});
$（“.teacher”）。单击（函数（）{
setItem（'user'，'teacher'）；
$（“.form wrapper div”）.removeClass（“处于活动状态”）；
$（this.addClass（'is-active'）；
});
});
。处于活动状态{
背景色：红色！重要；
宽度：40px；
高度：40px
}
老师，学生{
背景颜色：灰色；
宽度：40px；
高度：40px
}
使用jQuery，您可以执行以下操作：

HTML标记：

<div class="text-center">
  <h2>Who are you?</h2>
  <div class="form-wrapper" data-user="student">
    Student
  </div>
  <div class="form-wrapper" data-user="teacher">
    teacher
  </div>
</div>

JS:

我不知道您是否需要默认设置一个活动类

jQuery

如果没有jQuery，以下功能应该可以工作：

let formWrappers = document.getElementsByClassName('form-wrapper');
console.log(formWrappers)

for(let i = 0; i < formWrappers.length; i++){

    formWrappers[i].addEventListener('click', function() {

      let dataUser = this.dataset.user;
      localStorage.setItem('user',dataUser);

        if(document.querySelector('.is-active')){
        document.querySelector('.is-active').classList.remove('is-active');
        this.classList.add('is-active');
      }else {
         this.classList.add('is-active');
      }

  });

}

if(localStorage.getItem('user') !== null){
    document.querySelector('[data-user='+localStorage.getItem('user')+']').classList.add('is-active')
}

让formWrappers=document.getElementsByClassName（'form-wrapper'）；
console.log（formWrappers）
for（设i=0；i

Vanilla
根据您的逻辑，只有当
localStorage.user
为“aaa”时，才应在加载时添加类，并且您的代码中没有任何内容将其设置为该值-仅“student”或“teacher”。你也有一个打字错误=
=“aaa”
应该是
==“aaa”
@Utkanos即使我删除了那个部分，代码仍然不能正常工作。我运行了你的代码片段，它说，
“脚本错误”。
@programmerRaj这是我的JSFIDLE：你的FIDLE中没有任何东西试图恢复（添加）onload类-它只包含在事件处理程序中执行的代码。
$('.form-wrapper').click(function(){

    let dataUser = $(this).data('user');

  $('.form-wrapper.is-active').removeClass('is-active');

  $('.form-wrapper[data-user='+dataUser+']').addClass('is-active');

  localStorage.setItem('user',dataUser);

});

if(localStorage.getItem('user') !== null){
  $('.form-wrapper[data-user='+localStorage.getItem('user')+']').addClass('is-active');

}

let formWrappers = document.getElementsByClassName('form-wrapper');
console.log(formWrappers)

for(let i = 0; i < formWrappers.length; i++){

    formWrappers[i].addEventListener('click', function() {

      let dataUser = this.dataset.user;
      localStorage.setItem('user',dataUser);

        if(document.querySelector('.is-active')){
        document.querySelector('.is-active').classList.remove('is-active');
        this.classList.add('is-active');
      }else {
         this.classList.add('is-active');
      }

  });

}

if(localStorage.getItem('user') !== null){
    document.querySelector('[data-user='+localStorage.getItem('user')+']').classList.add('is-active')
}