如果页面重新加载，请保留JavaScript更改

Question

I made a very simple system where if the user clicks on a colour, some parts of the page turn that colour. But my question is, Is there a way to save this colour? That if the person refreshes the page the colour is still there?

This is the concept of my code, I made it very simple but in my project its way bigger. This is how i've done it

 $(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> 

Thanks in advance

Answer 1

You can do this using localStorage . It will store the selected color in browser's memory and when user refreshes the page, you can read the stored colour and set it using 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

You can use localStorage to save different values. localStorage stores key-value pairs.

Example:

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

You can then retrieve the data like this:

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

Don't forget to set colors to the saved values on page load.

Answer 3

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