Q:

Добавление в локальное хранилище (localStorage) значения со стилями

Есть, допустим, такая ситуация. Необходимо в localStorage добавить "Hello, world!", но чтобы после перезагрузки текст оставался красным цветом. Возможно ли такое сделать? Подскажите, пожалуйста, каким образом или перенаправьте на похожие темы.
Код самый простейший, просто для примера:
    <!DOCTYPE html>
<html>
<head>
<style>

.red {
   color: red;
}

</style>
</head>

<body>

<div id='wrapper'></div>

<script>

'use strict'
let wrapper = document.getElementById('wrapper');

let someText = document.createElement('h1');
let someBtn = document.createElement('input');
let someBtn2 = document.createElement('input');

someBtn.setAttribute('type', 'button');
someBtn.setAttribute('value', 'Change color');
someBtn2.setAttribute('type', 'button');
someBtn2.setAttribute('value', 'Add to local storage');

someText.innerHTML = 'Hello, world!';
wrapper.appendChild(someText);
wrapper.appendChild(someBtn);
wrapper.appendChild(someBtn2);

someBtn.addEventListener('click', () => {
    someText.className = 'red';
});

someBtn2.addEventListener('click', () => {

    JSON.stringify(localStorage.setItem('text', someText.textContent));
});

</script>

</body>

</html>

A:

Если переключать именно класс с цветом, то можно так:

    let wrapper = document.getElementById('wrapper');

    let someText = document.createElement('h1');
    let someBtn = document.createElement('input');
    let someBtn2 = document.createElement('input');

    someBtn.setAttribute('type', 'button');
    someBtn.setAttribute('value', 'Change color');
    someBtn2.setAttribute('type', 'button');
    someBtn2.setAttribute('value', 'Add to local storage');

    someText.innerHTML = 'Hello, world!';
    wrapper.appendChild(someText);
    wrapper.appendChild(someBtn);
    wrapper.appendChild(someBtn2);

    let NameOfClass = "red"; // Название класса

    let col = localStorage.getItem('color1'); //Проверяем параметр в хранилище
    if (col){ //Если есть
        someText.className = col; //Присваиваем класс
    }

    someBtn.addEventListener('click', () => {
        someText.className = NameOfClass;
    });

    someBtn2.addEventListener('click', () => {
        JSON.stringify(localStorage.setItem('text', someText.textContent));
        localStorage.setItem('color1', NameOfClass); //Сохраняем класс в хранилище
    });
        .red {
            color: red;
        }
<body>

<div id='wrapper'></div>

Вариант с цветами, а не с классами.

    let wrapper = document.getElementById('wrapper');

    let someText = document.createElement('h1');
    let someBtn = document.createElement('input');
    let someBtn2 = document.createElement('input');

    someBtn.setAttribute('type', 'button');
    someBtn.setAttribute('value', 'Change color');
    someBtn2.setAttribute('type', 'button');
    someBtn2.setAttribute('value', 'Add to local storage');

    someText.innerHTML = 'Hello, world!';
    wrapper.appendChild(someText);
    wrapper.appendChild(someBtn);
    wrapper.appendChild(someBtn2);

    let color = ""; // Создаём переменную

    let col = localStorage.getItem('color1'); //Проверяем параметр в хранилище
    if (col){ //Если есть
        someText.style.color = col; //Присваиваем цвет
    }

    someBtn.addEventListener('click', () => {
        color = "red"; // Задаём нужный цвет
        someText.style.color = color;
    });

    someBtn2.addEventListener('click', () => {
        JSON.stringify(localStorage.setItem('text', someText.textContent));
        localStorage.setItem('color1', color); //Сохраняем класс в хранилище
    });
<div id='wrapper'></div>

Пример с несколькими цветами:

        let wrapper = document.getElementById('wrapper');
        let wrapper1 = document.getElementById('wrapper');
        let wrapper2 = document.getElementById('wrapper');
    
    
        let someText = document.createElement('h1');
        let someText1 = document.createElement('h2');
        let someText2 = document.createElement('h3');
        let someBtn = document.createElement('input');
        let someBtn2 = document.createElement('input');
    
        someBtn.setAttribute('type', 'button');
        someBtn.setAttribute('value', 'Change color');
        someBtn2.setAttribute('type', 'button');
        someBtn2.setAttribute('value', 'Add to local storage');
    
        someText.innerHTML = 'Hello, world1!';
        wrapper.appendChild(someText);
        wrapper.appendChild(someBtn);
        wrapper.appendChild(someBtn2);
    
        someText1.innerHTML = 'Hello, world2!';
        wrapper1.appendChild(someText1);
    
        someText2.innerHTML = 'Hello, world3!';
        wrapper2.appendChild(someText2);
    
        let color = []; // Создаём переменную
    
        let col = JSON.parse(localStorage.getItem('color1'));
        if (col){ //Если есть
            someText.style.color = col[0]; //Присваиваем цвет
            someText1.style.color = col[1]; //Присваиваем цвет
            someText2.style.color = col[2]; //Присваиваем цвет
        }
    
        someBtn.addEventListener('click', () => {
            color.push("red"); // Задаём нужный цвет
            someText.style.color = color[0];
            color.push("blue"); // Задаём нужный цвет
            someText1.style.color = color[1];
            color.push("orange"); // Задаём нужный цвет
            someText2.style.color = color[2];
        });
    
        someBtn2.addEventListener('click', () => {
            JSON.stringify(localStorage.setItem('text', someText.textContent));
            localStorage.setItem('color1', JSON.stringify(color)); //Сохраняем класс в хранилище
        });
<div id='wrapper'></div>
<div id='wrapper1'></div>
<div id='wrapper2'></div>

