如果 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 令牌