javascript 如果本地存储为空,如何使其显示消息?

gkl3eglg  于 2023-03-06  发布在  Java
关注(0)|答案(2)|浏览(81)

我有一个本地存储器,我试图让我的网站显示一条消息时,本地存储器是空的。我有代码不工作。

if (localStorage.length === 0) {
            document.getElementById('message').style = 'display: block';   
            } 
            
            else {
                document.getElementById('message').style = 'display: none';   
            }

使用div标签表示消息:

<div class="message">MESSAGE</div>

我没有把它放在我的JS文件的函数中,而是把它放在我的脚本逻辑中。我可以把它放在函数中,但是我不确定我会如何调用它。

wljmcqd8

wljmcqd81#

您使用了错误的选择器,或者需要在div上设置ID而不是类:

<div id="message">MESSAGE</div>

否则你需要

document.querySelector(".message")

注意点
还要确保在元素存在之后执行代码。
我认为这是一个X/Y问题,因为localstorage.length永远不会是0,因为它有其他你没有放进去的东西。
我会的

window.addEventListener("DOMContentLoaded", () => {
  let myImageArray = localStorage.getItem("myImages") || [];
  const message = document.getElementById('message');
  const toggleMessage = () => message.hidden = myImageArray.length > 0;
  const updateLocalStorage() => {
    localStorage.setItem("myImages", myImagesArray); // only one place is updating localStorage
    toggleMessage();
  }
  const addImage = imageId => {
    myImagesArray.push(imageId);
    updateLocalStorage();
  };
  const removeImage = imageId => {
    myImagesArray = myImagesArray.filter(img => img !== imageId)
    updateLocalStorage();
  };
  toggleMessage(); // initialise
});

并且具有

<div id="message" hidden>MESSAGE</div>
2exbekwf

2exbekwf2#

我认为您只需将class更改为id

<div id="message">MESSAGE</div>

和JS:

document.getElementById('message').style.display = localStorage.length === 0 ? '' : 'none';

相关问题