时间戳

首页 > 解决方案 > 隐藏 div 并存储本地存储在页面刷新时不显示 div

html - 隐藏 div 并存储本地存储在页面刷新时不显示 div

问题描述

单击时，我在 div 中有一个图像按钮，我想隐藏图像按钮并以某种方式存储到本地存储中，以便在页面刷新时不再显示 div。

<div class="whatsapp"><a href="https://chat.whatsapp.com/........." target="_blank">
<img src="/img/whatsapp_group.png" alt="Whatsapp Join Button"><div class="whatsappbut">To Find Out MORE!</div></a></div>

标签： htmlonclicklocal-storage

解决方案

我在您的 div 中添加了一个 ID( id="img-btn")，以便在脚本标签中使用它。如果用户到目前为止没有单击您的图像按钮，localStorage.getItem('img-btn-clicked')将返回 null 否则它将返回“true”（正如我们在 saveClicked 函数中设置的那样）。
只需确保将脚本标记放在正文标记结束之前（或者您可以链接单独的 Javascript 文件）。

<body>
  <div id="img-btn" class="whatsapp">
    <a href="https://chat.whatsapp.com/........." target="_blank">
      <img src="/img/whatsapp_group.png" alt="Whatsapp Join Button" />
      <div class="whatsappbut">To Find Out MORE!</div></a>
  </div>

  <script>
    checkImgBtnClicked();

    function checkImgBtnClicked() {
      const clicked = localStorage.getItem('img-btn-clicked'); // if this is not set it will return null
      if (clicked) {
        document.getElementById('img-btn').style.display = 'none'; // hides the img-btn
      } else {
        // add event listener for image button click(saveClicked function will be executed if user clicks on image button
        document.getElementById('img-btn').addEventListener('click', saveClicked);
      } 
    }

    function saveClicked() {
      // set a flag in local storage that image button is clicked
      localStorage.setItem('img-btn-clicked', 'true'); 
      document.getElementById('img-btn').style.display = 'none'; // hides the img-btn after it gets clicked
    }
  </script>
</body>

推荐阅读