Question

我制作了一个非常简单的系统，如果用户点击颜色，页面的某些部分会转换该颜色。但我的问题是，有没有办法保存这种颜色？如果此人刷新页面，颜色仍然存在？

这是我的代码的概念，我使它非常简单，但在我的项目中它的方式更大。我就是这样做的

$(document).ready(function() {

$("#Blue").click(function() {
       $(".colorchange").css('background-color', '#0069D9');
        

    });

    $("#Purple").click(function() {
        $(".colorchange").css('background-color', '#563B64');
        
    });

    $("#Green").click(function() {
        $(".colorchange").css('background-color', '#00BA4B');
        
    });

    $("#Yellow").click(function() {
        $(".colorchange").css('background-color', '#FFFF00');
        
    });

    $("#Orange").click(function() {
        $(".colorchange").css('background-color', '#FF5E00');
        
    });

    $("#Red").click(function() {
        $(".colorchange").css('background-color', '#CC0000');
    
    });
});

.colorchange {

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">


<button id="Blue">Blue</button>
<button id="Purple">Purple</button>
<button id="Green">Green</button>
<button id="Yellow">Yellow</button>
<button id="Orange">Orange</button>
<button id="Red">Red</button>
           
           
<button class="btn btn-primary colorchange" type="submit">This color changes</button>

提前致谢

Answer 1

您可以使用localStorage执行此操作。它会将所选颜色存储在浏览器的内存中，当用户刷新页面时，您可以读取存储的颜色并使用jquery进行设置。

$(document).ready(function() {

    $("#Blue").click(function() {
       $(".colorchange").css('background-color', '#0069D9');        
       saveColor('#0069D9');
    });

    $("#Purple").click(function() {
        $(".colorchange").css('background-color', '#563B64');
        saveColor('#563B64');
    });

    $("#Green").click(function() {
        $(".colorchange").css('background-color', '#00BA4B');
        saveColor('#00BA4B');
    });

    $("#Yellow").click(function() {
        $(".colorchange").css('background-color', '#FFFF00');
        saveColor('#FFFF00');
    });

    $("#Orange").click(function() {
        $(".colorchange").css('background-color', '#FF5E00');
        saveColor('#FF5E00');        
    });

    $("#Red").click(function() {
        $(".colorchange").css('background-color', '#CC0000');
        saveColor('#CC0000');    
    });

    function saveColor(color)
    {
        localStorage.setItem("selectedcolor", color);
    }

    var clr = localStorage.getItem("selectedcolor");
    if(clr != '' && clr != null)
    {
        $(".colorchange").css('background-color', clr);
    }
});

Answer 2

您可以使用localStorage保存不同的值。 localStorage存储键值对。

示例：

 localStorage.setItem("BlueDiv", "#0069D9");

然后您可以检索如下数据：

localStorage.getItem("BlueDiv"); //Returns "#0069D9"

不要忘记在页面加载时将颜色设置为已保存的值。

Answer 3

您可以使用cookies和localstorage来存储更改

如果页面重新加载，请保持更改javascript

3 个答案: