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

Question

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

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);
    });
}