Question

我正在开发一个站点，您可以在其中设置“暗模式”，但是当我访问它或刷新它时，总是将其设置为浅色版本。无论如何，他们的选择是否可以在设备上设置/保存。

 <button onclick="document.body.style.backgroundColor = '#2e2e2e'">Dark Mode</button>
  <button onclick="document.body.style.backgroundColor = 'white'">Light Mode</button>

这就是我现在所拥有的，直到我弄清楚如何保存该选择。

Answer 1

使用JavaScript Cookie

此处所有代码

注意：我使用的Cookie的名称是：bodyColor;

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Testing Page</title>
</head>
<body onload="setbodycolor()">
<p>Testing Page</p>

<button onclick="setbodyBGDarkColor();setCookieDark()">Dark Mode</button>
<button onclick="setbodyBGWhileColor();setCookieWhite()">Light Mode</button>


<script>
    function setbodyBGDarkColor(){
        document.body.style.backgroundColor = '#2e2e2e'
    }
    function setbodyBGWhileColor(){
        document.body.style.backgroundColor = 'white'
    }

    function setCookieDark(){
        document.cookie="bodyColor=#2e2e2e;expires=Wed, 18 Dec 2023 12:00:00 GMT"
    }
    function setCookieWhite(){
        document.cookie="bodyColor=#ffffff;expires=Wed, 18 Dec 2023 12:00:00 GMT"
    }


    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
        c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
        }
        return "";
    }

    function setbodycolor(){
        var bodyc=getCookie("bodyColor");
        document.body.style.backgroundColor = ""+bodyc;
    }
</script>

</body>
</html>

我认为这对您来说是更好的解决方案。

Answer 2

我在Vanilla JS上找到了这个。您可以保存会话。

document.body.style.backgroundColor = sessionStorage.getItem('bg');
document.body.style.color = sessionStorage.getItem('cc');
function darker() {

 if ( sessionStorage.getItem('bg') === 'rgb(255, 255, 255)') {

        sessionStorage.setItem('bg', 'rgb(6, 23, 37)');

        sessionStorage.setItem('cc', '#777');

         }
        else if (sessionStorage.getItem('bg') == null || undefined) {
            sessionStorage.setItem('bg', 'rgb(6, 23, 37)');
            sessionStorage.setItem('cc', '#777');

        }
        else if( sessionStorage.getItem('bg') === 'rgb(6, 23, 37)') {

            sessionStorage.setItem('bg', 'rgb(255, 255, 255)');
            sessionStorage.setItem('cc', '#333');


        }

    document.body.style.backgroundColor = sessionStorage.getItem('bg');
    document.body.style.color = sessionStorage.getItem('cc');

    }

Answer 3

有几种方法可以完成-一种方法是使用LocalStorage API来实现此目标，如下所示：

/* 
Local helper applies color to document background and saves that color for
recall on future page loads
*/
function applyTheme(color) {

  localStorage.set("themeColor", color);

  document.body.style.backgroundColor = themeColor;
}

/* 
Setup event hander that is called when DOM is ready
*/
window.addEventListener('DOMContentLoaded', () => {

    /* 
    When DOM ready, load previous theme color and apply it (or default to 
    white if no color previously saved)
    */
    applyTheme(localStorage.get("themeColor") || "white");

    /* 
    Bind click event to buttons and invoke apply theme helper function
    */
    document.getElementById("dark").addEventListener("click", () => applyTheme("#2e2e2e"));        
    document.getElementById("light").addEventListener("click", () => applyTheme("white"));    
});

<button id="dark">Dark Mode</button>
<button id="light">Light Mode</button>

无论如何要保存背景图片，以便在重新加载时保存您的选择

3 个答案: