Установка стиля CSS из локального хранилища при обновлении страницы

Question

Я пытаюсь установить значение, хранящееся в локальном хранилище, когда страница обновляется.Значение отображается в локальном хранилище, но когда я устанавливаю значение для класса, оно не изменяется.Есть причина почему?Приведенный ниже код принимает значение из диапазона ввода и устанавливает непрозрачность для класса, называемого баров.Я хочу установить его на значение

var opacity = localStorage.getItem('opacity');

$('#opacity').on('input', function() {
    $('.bars').css('opacity', $(this).val());
    localStorage.setItem('opacity', document.getElementById('opacity').value);
});

Answer 1

Вы устанавливаете стиль только при вводе, а не при загрузке страницы:

var opacity = localStorage.getItem('opacity');
if (opacity) {
    $(function() {
        $('.bars').css('opacity', opacity);
    });
}