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

Posted

技术标签:

【中文标题】如果 localStorage 值存在而不重新加载页面,则 Javascript 添加类【英文标题】:Javascript add class if localStorage value exists without reloading page 【发布时间】: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" >
  <img class="demarrerVosRepImg hide" (click)="goReps()" src="../assets/imgs/muscu_cardio/demarrerVosReps@2x.png" >
</div>

Ts:

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

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

【问题讨论】:

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

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

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

setInterval(() => 

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

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

)

【讨论】:

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

以上是关于如果 localStorage 值存在而不重新加载页面,则 Javascript 添加类的主要内容,如果未能解决你的问题,请参考以下文章

解决WebView写入localstorage但首次加载取不到值的问题

AngularJS SPA 需要重新加载以识别 localstorage 中的 jwt 令牌

将表单的所有输入重置为默认值而不重新加载

从 MYSQL 表中更新值而不重新加载页面?

web本地存储(localStoragesessionStorage)

web本地存储(localStoragesessionStorage)