如何使用localStorage使瀏覽器記住亮/暗模式主題切換的類串列切換狀態？-有解無憂

我在一個有明/暗模式主題切換的投資組合網站上作業。開關作業，但它不保存輸入。因此，當用戶重繪或單擊導航鏈接時，網站將回傳到默認的光照模式。我希望它記住狀態。我知道我必須使用 localStorage 才能使其作業，但我似乎不知道該怎么做。

網站： www.hermanvulkers.com

JavaScript 主題切換代碼：


button.addEventListener("click", function () {
    if (document.body.classList.contains("light-theme")) {
        // Turn light mode off -> dark mode on
        document.body.classList.toggle("light-theme");
        document.getElementById('themeswitcher').innerHTML = `<span>Dark</span><img src="images/moon.png" alt="如何使用 localStorage 使瀏覽器記住亮/暗模式主題切換的類串列切換狀態？">`;

    } else {
        // Turn dark mode off -> light mode on  
        document.body.classList.toggle("light-theme");
        document.getElementById('themeswitcher').innerHTML = `<span>Light</span><img src="images/sunrise.png" alt="如何使用 localStorage 使瀏覽器記住亮/暗模式主題切換的類串列切換狀態？"></img>`;
        
    }
});

HTML按鈕代碼：

<button class="themeswitcher" id="themeswitcher">
    <span>Dark</span>
    <img src="images/moon.png" alt="Choose website theme">
</button>

有人可以幫忙嗎？提前致謝！

uj5u.com熱心網友回復：

你可以這樣添加：

button.addEventListener("click", function () {
    if (document.body.classList.contains("light-theme")) {
        // Turn light mode off -> dark mode on
        window.localStorage.setItem('darkmodeTurnedOn', 'true');
        document.body.classList.toggle("light-theme");
        document.getElementById('themeswitcher').innerHTML = `<span>Dark</span><img src="images/moon.png" alt="如何使用 localStorage 使瀏覽器記住亮/暗模式主題切換的類串列切換狀態？">`;

    } else {
        // Turn dark mode off -> light mode on  
        document.body.classList.toggle("light-theme");
        window.localStorage.setItem('darkmodeTurnedOn', 'false');
        document.getElementById('themeswitcher').innerHTML = `<span>Light</span><img src="images/sunrise.png" alt="如何使用 localStorage 使瀏覽器記住亮/暗模式主題切換的類串列切換狀態？"></img>`;
        
    }
});

此外，在您的網站初始加載時，您應該讓偵聽器打開或關閉此功能，如下所示：

<body onl oad="setTheme">

在 setTheme 函式中，您可以執行以下操作：

function setTheme(){
  if (window.localStorage.getItem('darkmodeTurnedOn') === 'true'){
     document.body.classList.remove("light-theme");
  }
}

uj5u.com熱心網友回復：

您的代碼不必要地復雜。

這是完整版

window.addEventListener("load",function() {
  const theme = localStorage.getItem("theme");
  if (theme) document.body.classList.toggle("light-theme",theme==="light")
  document.getElementById("themeswitcher").addEventListener("click", function () {
    const light = document.body.classList.contains("light-theme")
    this.innerHTML = `<span>${light? 'Dark' : 'light'}</span><img src="images/${light? 'moon' : 'sunrise'}.png" alt="如何使用 localStorage 使瀏覽器記住亮/暗模式主題切換的類串列切換狀態？">`;
    document.body.classList.toggle("light-theme");
    localStorage.setItem("theme",light?"dark":"light");
  });
});

uj5u.com熱心網友回復：

您可以簡單地將一個專案設定到 localStorage 中：

localStorage.setItem('key', value);

然后訪問它

let value = localStorage.getItem('key');

所以我認為這應該有效：

    button.addEventListener("click", function () {
    if (document.body.classList.contains("light-theme")) {
        // Turn light mode off -> dark mode on
        document.body.classList.toggle("light-theme");
        document.getElementById('themeswitcher').innerHTML = `<span>Dark</span><img src="images/moon.png" alt="如何使用 localStorage 使瀏覽器記住亮/暗模式主題切換的類串列切換狀態？">`;
        window.localStorage.setItem('darkMode', 'true');

    } else {
        // Turn dark mode off -> light mode on  
        document.body.classList.toggle("light-theme");
        document.getElementById('themeswitcher').innerHTML = `<span>Light</span><img src="images/sunrise.png" alt="如何使用 localStorage 使瀏覽器記住亮/暗模式主題切換的類串列切換狀態？"></img>`;
        window.localStorage.setItem('darkMode', 'false');
        
    }
});

在代碼開頭的某個地方：

let wasDarkMode = window.localStorage.getItem('darkMode');
if (wasDarkMode) {
document.body.classList.toggle("light-theme");
    

    document.getElementById('themeswitcher').innerHTML = `<span>Dark</span><img src="images/moon.png" alt="如何使用 localStorage 使瀏覽器記住亮/暗模式主題切換的類串列切換狀態？">`;
} else {
document.body.classList.toggle("light-theme");
            document.getElementById('themeswitcher').innerHTML = `<span>Light</span><img src="images/sunrise.png" alt="如何使用 localStorage 使瀏覽器記住亮/暗模式主題切換的類串列切換狀態？"></img>`;
}

uj5u.com熱心網友回復：

這可用于設定和重新設定開關狀態。當您需要檢查狀態時檢索它。而不是 "if (document.body.classList.contains("light-theme"))" 你應該只使用 localstorage 狀態。如果它為空，只需將默認狀態設定為 localstorage。

export const set = (key, value) => {
localStorage.setItem(key, JSON.stringify(value));
};

export const retrieve = key => {
    try {
      return JSON.parse(localStorage.getItem(key));
} catch (error) {
    return null;
}
};

export const remove = key => localStorage.removeItem(key);

export const exists = key => localStorage.getItem(key) !== null;

uj5u.com熱心網友回復：

這是兩個或更多主題的主題切換器。與本地存盤合作。告訴我它是否很好用，如果你有問題。:)

document.addEventListener("DOMContentLoaded", function() {
    var themesList = ['dark-theme', 'light-theme', 'other-theme'];

    var theme = localStorage["theme"] || themesList[0]  /*if localStorage["theme"] exists || default is dark-theme*/;
    const updateTheme = (themeToUpdate = theme)=>{
        switch (themeToUpdate) {
            case 'light-theme':
                document.getElementById('themeswitcher').setAttribute('data-theme', themeToUpdate); // better to use data-* attributes for javascript use only
                document.getElementById('themeswitcher').innerHTML = `<span>Light</span><img src="images/sunrise.png" alt="如何使用 localStorage 使瀏覽器記住亮/暗模式主題切換的類串列切換狀態？">`;
            break;
            case 'dark-theme':
                document.getElementById('themeswitcher').setAttribute('data-theme', themeToUpdate);
                document.getElementById('themeswitcher').innerHTML = `<span>Dark</span><img src="images/moon.png" alt="如何使用 localStorage 使瀏覽器記住亮/暗模式主題切換的類串列切換狀態？">`;
            break;
            case 'other-theme':
                document.getElementById('themeswitcher').setAttribute('data-theme', themeToUpdate);
                document.getElementById('themeswitcher').innerHTML = `<span>Other</span><img src="whatever/you/want.png" alt="如何使用 localStorage 使瀏覽器記住亮/暗模式主題切換的類串列切換狀態？">`;
            break;
        
            default:
            break;
        }    
    } 
    updateTheme(theme);

    button.addEventListener("click", function () {
         let nextIndex = (themesList.indexOf(theme) >= themeList.length - 1) ? 0 : themesList.indexOf(theme)   1;
        theme = themesList[nextIndex];
        localStorage["theme"] = theme;
        updateTheme(theme);
    });
});

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/354075.html

標籤：javascript

上一篇：函式不僅呼叫一次

下一篇：JS中物件陣列的分組問題