Javascript 刷新页面时从本地存储设置CSS样式

我试图在刷新页面时设置存储在本地存储器中的值。该值显示在本地存储中，但当我将该值设置为类时，它不会更改。有什么原因吗？下面的代码从范围输入中获取一个值，并将不透明度设置为一个名为bars的类。我想将其设置为值

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

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

---

您仅在输入时设置样式，而不是在页面加载时：

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

---

您仅在输入时设置样式，而不是在页面加载时：

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