如果 localStorage 值存在而无需重新加载页面，则 Javascript 添加类

Question

我在 ionic 5 和 angular 上工作，我需要在模式弹出后更改我的 View 的 DOM。
问题是我必须重新加载 View 才能看到 DOM 修改，我需要在不重新加载的情况下更改它。
第一步 = 在 LocalStorage 中添加键和值，单击元素时会出现模式。
第二步 = 当模态关闭时，我需要在 div 上添加一个 addCLass('hide')。
在不重新加载页面的情况下进行这些更改的任何提示？
HTML代码:

    <div class="circleImgContainer">
  <img class="suivezLaRecoImg" src="../assets/imgs/muscu_cardio/circleRecommandation@2x.png" alt="">
  <img class="demarrerVosRepImg hide" (click)="goReps()" src="../assets/imgs/muscu_cardio/demarrerVosReps@2x.png" alt="">
</div>

:

  ngOnInit() {
let content = document.querySelector(".circleImgContainer");

if (localStorage.getItem('serie_1') == 'true') {
  content.classList.add('hide');
}

}

Answer 1

我相信在这种情况下你可以使用 setInterval总是检查是否 localStorage具有所需的值并更改页面内容而无需重新加载。
下面是一个例子，通常你可以提供setInterval有一个时间(以毫秒为单位)间隔，但没有，如果 if 它将总是不断更新语句匹配您设置的条件。

setInterval(() => {

  ngOnInit() {
    let content = document.querySelector(".circleImgContainer");

    if (localStorage.getItem('serie_1') == 'true') {
      content.classList.add('hide');
    }
  }

})