Как сохранить изменения на сайте, которые сделали пользователи

Question

У меня на сайте есть возможность менять цвет подсветки, но после перезагрузки она слетает до начальной. Как можно сделать так чтобы цвета не слетали?

Так я добавил HEX самих цветов

localStorage.setItem('lazuli', '#007fff');
localStorage.setItem('malahit', '#0BDA51');
localStorage.setItem('ruby', '#e0112a');

let lazuli = localStorage['lazuli'];
let malahit = localStorage['malahit'];
let ruby = localStorage['ruby'];

Вот так осуществляется их смена

const btn1 = document.querySelector('.btn-lazuli');
const btn2 = document.querySelector('.btn-malahit')
const btn3 = document.querySelector('.btn-ruby')
const Col = document.querySelectorAll('#chang');

function changeColor1() {
    for (elem of Col) {
        elem.style.backgroundColor = lazuli;
    }
}
btn1.addEventListener('click', changeColor1);


function changeColor2() {
    for (elem of Col) {
        elem.style.backgroundColor = malahit;
    }
}
btn2.addEventListener('click', changeColor2);


function changeColor3() {
    for (elem of Col) {
        elem.style.backgroundColor = ruby;
    }
}
btn3.addEventListener('click', changeColor3);

Но как сохранить выбранный

Answer 1

Суть в том, что не нужно хранить все цвета в localstorage. Храните в нем выбранное значение и на каждом изменении обновляйте. А текущее значение цветов на сайте берите уже из localstorage.

///Сохраняем цвета
const colours = {
    lazuli: '#007fff',
    malahit: '#0BDA51',
    ruby: '#e0112a',
    defaultColour: '#9e9e9e',
};

//Получаем элементы
const btn1 = document.querySelector('.btn-lazuli');
const btn2 = document.querySelector('.btn-malahit');
const btn3 = document.querySelector('.btn-ruby');
const col = document.querySelectorAll('#chang');
// Устанавливаем элементам цвета из localstorage, если там пусто, то ставим дефолтный цвет.
col.forEach((elem) => {
    if (!localStorage.getItem('currentColour')) {
        elem.style.backgroundColor = colours.defaultColour;
        //Если какой либо дефолтный цвет уже задан через CSS то можно 
        //оставить только return, или вначале делать проверку, и запускать 
        //цикл только если localstorage не пустой
        return;
    }
    elem.style.backgroundColor = localStorage.getItem('currentColour');
});

//Создаем функцию обработчик клика. Это один из вариантов её реализации.
//Функция проверяет какая кнопка нажата, в зависимости от этого записывает текущий цвет в localstorage
//Затем перебирает элементы и задает им выбранный цвет
function onBtnClickHandler(e) {
    switch (e.target.textContent) {
        case 'Lazuli':
            localStorage.setItem('currentColour', `${colours.lazuli}`);
            break;
        case 'Malahit':
            localStorage.setItem('currentColour', `${colours.malahit}`);
            break;
        case 'Ruby':
            localStorage.setItem('currentColour', `${colours.ruby}`);
            break;
        default:
            break;
    }
    col.forEach((elem) => {
        elem.style.backgroundColor = localStorage.getItem('currentColour');
    });
}

//Навешиваем обработчик на кнопки и передаем ранее созданную функцию
btn1.addEventListener('click', onBtnClickHandler);
btn2.addEventListener('click', onBtnClickHandler);
btn3.addEventListener('click', onBtnClickHandler);

С реализацией можно поиграться, главная суть в том, что бы хранить в localstorage только одно выбранное значение

Вот HTML на котором это дело тестилось (на всякий случай =)) ):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Colours</title>
        <style>
            .container {
                display: flex;
                justify-content: center;
                gap: 10px;
            }
            #chang {
                width: 50px;
                height: 50px;
                background-color: black;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div id="chang"></div>
            <div id="chang"></div>
            <div id="chang"></div>
            <div id="chang"></div>
        </div>
        <div class="btns">
            <button class="btn-lazuli">Lazuli</button>
            <button class="btn-malahit">Malahit</button>
            <button class="btn-ruby">Ruby</button>
        </div>
        <script src="./main.js"></script>
    </body>
</html>

БЛОГ НА HUSL

Как сохранить изменения на сайте, которые сделали пользователи

Ответы (1 шт):