如何在JavaScript中使用localStorage存盤背景顏色的變化？

我有幾個 html 元素，例如body, div，并且它們nav的背景顏色可以由用戶全域更改。

這些元素使用特定的class name.

它的作業方式是：有 3 個按鈕可以更改 3 個元素中的每一個的 bg.color。當用戶點擊一個按鈕時，它會打開一個包含所有可用顏色的模式，其中至少有 300 種不同的顏色。一旦他們單擊 a hex value，具有該特定類名的所有元素都將更改其顏色。

請看下面這個例子。為簡單起見，我洗掉了模態，僅針對 1 個類名：card-bg.

function changeBgColor(color){
    var elements = document.getElementsByClassName("card-bg")
    for (var i = 0; i < elements.length; i  ) {
        elements[i].style.background=color;
    }
}

<div class="card-bg">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit reiciendis asperiores incidunt accusamus mollitia eligendi culpa ea iure harum, repellendus animi natus odio unde explicabo, perspiciatis consectetur laudantium eius. Nisi!
</div>

<br/>

<div class="card-bg">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit reiciendis asperiores incidunt accusamus mollitia eligendi culpa ea iure harum, repellendus animi natus odio unde explicabo, perspiciatis consectetur laudantium eius. Nisi!
</div>

<div style="background-color: #ffebee" class="text-dark">
    <p>Red 50 <span><a onclick="changeBgColor('#FFEBEE');">#FFEBEE</a></span></p>
</div>
<div style="background-color: #ffcdd2" class="text-dark">
    <p>100 <span><a onclick="changeBgColor('#FFCDD2');">#FFCDD2</a></span></p>
</div>
<div style="background-color: #ef9a9a" class="text-dark">
    <p>200 <span><a onclick="changeBgColor('#EF9A9A');">#EF9A9A</a></span></p>
</div>

這作業正常，但我想添加更多內容以改進其功能，即localStorage. 這樣當用戶關閉他們的計算機時，他們將能夠保存他們的定制。

此外，如果用戶選擇，我想要一個新按鈕來將這些顏色重置為默認值。

我剛剛了解了它，我仍在嘗試了解 JavaScript 的一般情況……盡管我想實作這個功能。

任何幫助將非常感激。非常感謝您！

uj5u.com熱心網友回復：

在您的更改顏色功能中，如果提供了顏色，請將其設定為本地存盤。如果未提供，則檢索保存到本地存盤的值。然后改變元素的顏色。

function changeBgColor(color){
    // if provided color, set color to LS
    if (color) window.localStorage.setItem('bgColor', color);
    // if no provided color, check LS for color, and if no color in LS, fail silently
    else if (!(color = window.localStorage.getItem('bgColor'))) return;

    // update the page
    var elements = document.getElementsByClassName("card-bg")
    for (var i = 0; i < elements.length; i  ) {
        elements[i].style.background=color;
    }
}

并在您的加載函式中，只需通過使用空引數呼叫相同的函式來更新頁面：

window.addEventListener('DOMContentLoaded', () => changeBgColor());

uj5u.com熱心網友回復：

您可以創建一個保存顏色的變數，并在方便時將其存盤在 localStorage 中，而不是在localStorage設定時將其存盤在其中：

var bgcolor = "#000000"
function changeBgColor(color) {
    bgcolor = color; // Whenever the color is changed, it's stored in bgcolor
                        so that you can quickly set localStorage to it.
    var elements = document.getElementsByClassName("card-bg")
    for (var i = 0; i < elements.length; i  ) {
        elements[i].style.background = color;
    }
}

function storeCurrentColor() { // Stores the current background color (which was stored in bgcolor) in localStorage
    window.localStorage.setItem("bgcolor", bgcolor);
}

function getCurrentColor() { // Gets the current background color and moves from localStorage into bgcolor.
    bgcolor = window.localStorage.getItem("bgcolor");
}
function getAndSetCurrentColor() { // Gets the color from localStorage and sets the background color to it.
    getCurrentColor();
    changeBgColor(bgcolor);
}

標籤：javascript html css

上一篇：計算多維陣列中的總價

下一篇：R-geom_ribbon()沒有唯一的x值