时间戳

首页 > 解决方案 > 如何在 JS 的 style.backgroundColor 中使用本地存储？

javascript - 如何在 JS 的 style.backgroundColor 中使用本地存储？

问题描述

我正在尝试设置暗模式和亮模式选项。我有两个按钮，我正在使用点击功能来更改背景颜色，但我想在多个页面中使用它，这样当我点击暗模式时，即使在刷新或进入另一个页面后，它仍然是相同的暗模式。

<li class="nav-item">
        <a class="nav-link" data-widget="navbar-search" href="#" role="button" onclick="dark()">
          <i class="far fa-moon"></i>
        </a>
    </li>
    
    <li class="nav-item">
        <a class="nav-link" data-widget="navbar-search" href="#" role="button" onclick="light()">
          <i class="fas fa-sun"></i>
        </a>
    </li>

<script>
          function dark(){
            
            document.getElementsByClassName("content-wrapper")[0].style.backgroundColor="#454D55";
            localStorage.setItem("color", "#454D55");
        }
        
        function light(){
            document.getElementsByClassName("content-wrapper")[0].style.backgroundColor = "#F4F6F9";
        }
      </script>

标签： javascriptcsslocal-storagethread-local-storage

解决方案

因此，乍一看，当 DOM 刚刚加载时，您似乎必须将初始背景颜色保存在 localStorage 中。通过以下简单的步骤，您可以为您的案例提供类似的工作：

  1. 检查 DOM 何时加载
  2. 检查默认模式颜色，如果颜色不存在，则在 localStorage 中设置它并将颜色应用于 DOM 元素。
  3. 最后，添加DOMContentLoaded事件侦听器，并将设置/检查默认模式的函数作为回调传递给它。
  4. 定义你的light()和dark()函数，你应该准备好看到你的更改生效。
  5. 看下面一个简单的实现：

项目清单

function ready(){
   let color;
   const mode = localStorage.getItem("color")
   if(!mode){
   //set default mode color here
     color = "#000"
     localStorage.setItem("color", "#000")
     return document.getElementsByClassName("content-wrapper")[0].style.backgroundColor = color;
   }

   document.getElementsByClassName("content-wrapper")[0].style.backgroundColor=color;
}

document.addEventListener("DOMContentLoaded", ready);

function dark(){
        
        document.getElementsByClassName("content-wrapper")[0].style.backgroundColor="#454D55";
        localStorage.setItem("color", "#454D55");
    }
    
    fu

nction light(){
        document.getElementsByClassName("content-wrapper")[0].style.backgroundColor = "#F4F6F9";
    }

推荐阅读