时间戳

首页 > 解决方案 > 当我按下按钮更改背景颜色时，颜色将保存在本地存储中，其他按钮也是如此

javascript - 当我按下按钮更改背景颜色时，颜色将保存在本地存储中，其他按钮也是如此

问题描述

我已经做到了，当我按下按钮时，背景颜色会从原来的颜色变成另一种颜色，但是当我按下按钮时没有被保存！当按下它进入本地存储时，我该怎么做？lang是芬兰人

这是代码： surley 我没有定义变量，因为我不知道我会怎么做？

function haeArvo(){
        //Tässä haetaan localStorage
        document.body.classList.add("bodybgGradient");
    }
         function myFunction() {
        document.body.classList.remove("bodybgBlue");
        document.body.classList.add("bodybgGradient");
        console.log('toimi');
        // laita local storageen talteen muuttuja 
    }

    function myFunction2() {
        document.body.classList.remove("bodybgGradient");
        document.body.classList.add("bodybgBlue");
    }

    if (typeof(Storage) !== "undefined") {
                // Store
                localStorage.setItem("chosen color", color);
    </script>
    
</head>
<body onload="haeArvo()" >

按钮代码：

<div>
            <label>Vaihda tausta väriä:</label>
            <button onclick="myFunction()">Gradient</button>
            <button onclick="myFunction2()">Blue</button>

        </div>

标签： javascripthtml

解决方案

将您的 localStorage logica 插入函数中。因此，您可以在您创建的事件侦听器(myFunction, myFunction2) 中调用该函数。您可以将颜色作为参数传递以在 localStorage 中存储正确的颜色。这是你要找的吗？

function haeArvo() {
    //Tässä haetaan localStorage
    document.body.classList.add("bodybgGradient");
}

function myFunction() {
    document.body.classList.remove("bodybgBlue");
    document.body.classList.add("bodybgGradient");
    console.log('toimi');
    saveToLocalStorage("bgGradient") // pass your color as a parameter
    // laita local storageen talteen muuttuja 
}

function myFunction2() {
    document.body.classList.remove("bodybgGradient");
    document.body.classList.add("bodybgBlue");
    saveToLocalStorage("blue") // pass your color as a parameter
}

function saveToLocalStorage(color) {
    if (typeOf(Storage) !== "undefined") {
        localStorage.setItem("chosenColor", color);
    }
}

推荐阅读