skip to Main Content

In my attached code, I display a color picker, then I select a color, then I click the button "contact-info-btn" to change its background color to the selecetd color. However, the change is only good for that window. When refresh the window, it goes back to the old color. is there any way to make this change permanent?

<script>
document.querySelector('#contact-info-btn').addEventListener('click', (event) => {
            event.target.style.backgroundColor = document.querySelector("#color-picker").value
        });
<label for="color-picker">Color:</label>
    <input type="color" id="color-picker" />
    <form method="post" class="homepg-form" id="homepg-form" >
.
.
<button class="contact-info-btn" id="contact-info-btn" type="button" >İletişim bilgileri</button>        

2

Answers


  1. You can use localStorage to save the value and set it when the page reloads:

    document.querySelector('#contact-info-btn').addEventListener('click', (event) => {
        let color = document.querySelector("#color-picker").value;
        event.target.style.backgroundColor = color;
        localStorage.setItem('contact-info-btn-color', color);
    });
    
    window.addEventListener('load', () => {
        let color = localStorage.getItem('contact-info-btn-color');
        if(color !== null)
            document.querySelector('#contact-info-btn').style.backgroundColor = color;
    });
    
    Login or Signup to reply.
  2. localStorage: localStorage is a property that allows JavaScript sites and apps to save key-value pairs in a web browser with no expiration date.

            function setColorToLocalStorage(value) {
                return localStorage.setItem('bgColor', value);
            }
    
            function getColorFromLocalStorage() {
                return localStorage.getItem('bgColor');
            }
    
            function changeBgColor(elem) {
                //get value from local storage if not set in local storage then use default value
                elem.style.backgroundColor = getColorFromLocalStorage() || 'blue';
            }
    
            const contactBtn = document.querySelector('#contact-info-btn');
    
            //set/update localstorage bgColor value
            contactBtn.addEventListener('click', () => {
                const bgColorVal = document.querySelector("#color-picker").value;
                // set bgColor to localStorage
                setColorToLocalStorage(bgColorVal);
                //change background color
                changeBgColor(contactBtn);
            });
    
            window.addEventListener("load", () => {
                //on window refresh get bgColor value from localstorage
                changeBgColor(contactBtn);
            });
    
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <label for="color-picker">Color:</label>
        <input type="color" id="color-picker" />
        <form method="post" class="homepg-form" id="homepg-form">
            <button class="contact-info-btn" id="contact-info-btn" type="button">Change Background</button>
        </form>
    </body>
    
    </html>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search