如果 localStorage 值存在而不重新加载页面，则 Javascript 添加类答案

【问题标题】：Javascript add class if localStorage value exists without reloading page如果 localStorage 值存在而不重新加载页面，则 Javascript 添加类
【发布时间】：2021-09-24 10:04:48
【问题描述】：

我在 ionic 5 和 angular 上工作，我需要在模态弹出窗口后更改视图的 DOM。问题是我必须重新加载视图才能看到 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>

Ts：

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

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

}

【问题讨论】：

不知道我是否理解正确：你为什么不将它绑定到模态的另一个点击事件。例如当它被解雇时。

标签： javascript angular typescript ionic-framework local-storage

【解决方案1】：

我相信在这种情况下，您可以使用setInterval 始终检查localStorage 是否具有所需的值并更改页面内容而无需重新加载。

下面是一个例子，通常你可以为setInterval提供一个时间间隔（以毫秒为单位），但如果没有，它总是会不断更新如果if语句符合你设置的条件。

setInterval(() => {

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

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

})

【讨论】：

我在另一次单击时绑定了更改，等待找到更清洁的解决方案。我想使用 setInterval 可能会起作用，我没有考虑过，非常好的主意！非常感谢。