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

【问题标题】：How to use local storage in style.backgroundColor in JS?如何在 JS 的 style.backgroundColor 中使用本地存储？
【发布时间】：2021-11-04 18:21:57
【问题描述】：

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

<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>

【问题讨论】：

标签： javascript css local-storage thread-local-storage

【解决方案1】：

谢谢大家，我已经通过使用 cookie 做到了这一点。我认为使用 cookie 要容易得多。

HTML

<button type="button" class="btn btn-light color-btn" data-color="#F4F6F9" ><i class="fas fa-sun"></i> Light Mode</button>

<button type="button" class="btn btn-dark color-btn" data-color="#454D55" ><i class="far fa-moon"></i> Dark Mode</button>

CSS

[data-color="black"] { 
    background: #454D55; 
   
}
[data-color="white"] {
    background: #F4F6F9;        
}

Javascript

 window.addEventListener('DOMContentLoaded', function () {
    var cookieValue = getCookie('backgroundColor'),
        btns = document.querySelectorAll('.color-btn');



    if (cookieValue) {
        setBackgroundColor(cookieValue);
    }

    Array.from(btns).forEach(function (btn) {
        btn.addEventListener('click', function () {
            var color = this.getAttribute('data-color');
            setBackgroundColor(color);
        });
    });
});

function setBackgroundColor(color) {
    document.getElementsByClassName("content-wrapper")[0].style.backgroundColor = color;
    setCookie('backgroundColor', color);
    console.log(color);
}

function getCookie(name) {
    var cookies = document.cookie.split(';'),
        cookie = cookies.find(function (str) {
            return str.indexOf(name + '=') === 0;
        });
    if (cookie) {
        return cookie.split('=')[1];
    }
    return null;
}

function setCookie(name, value) {
    document.cookie = name + '=' + value;
}

var expiry = new Date();
    expiry.setFullYear(expiry.getFullYear() + 1);
    document.cookie = name + '=' + value + '; expires=' + expiry.toUTCString() + ';';

【讨论】：

【解决方案2】：

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

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

列表项

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";
    }

【讨论】：

感谢大哥的解决方法。我需要知道如何将初始背景颜色存储在 localStorage 中。如果你能在小提琴中给我看一个演示，那就太好了？

【解决方案3】：

你就在那里。你只需要监听 load 事件并从 localStorage 中获取颜色。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>
  <body class="content-wrapper" onload="loadTheme()">
    <li class="nav-item">
        <a class="nav-link" data-widget="navbar-search" href="#" role="button" onclick="dark()">
         nmnmn <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()">
         mnmnmnkjkj <i class="fas fa-sun"></i>
        </a>
    </li>

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

【讨论】：

感谢您的解决方案。您能告诉我您是如何将颜色存储在本地存储中的吗？
您需要创建一个可变颜色并将颜色分配给它。然后你需要 localStorage.setItem("color", color)

【解决方案4】：

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

您省略了在light 函数中设置值的函数。

【讨论】：