javascript - 在重新加载页面上将 CSS 类保存在本地存储中的对象上

Question

我想做的是在用户重新刷新页面时保存 CSS 样式。这是我的 jQuery 代码:

$(function() {

$("#slider").draggable({
    axis: 'x',
    containment: 'parent',
    drag: function(event, ui) {
        if (ui.position.left > 230) {
            $("#well").fadeOut();
            $( "#well" ).addClass( "disappear" );
        } else {
            // Apparently Safari isn't allowing partial opacity on text with background clip? Not sure.
            // $("h2 span").css("opacity", 100 - (ui.position.left / 5))
        }
    },
    stop: function(event, ui) {
        if (ui.position.left < 231) {
            $(this).animate({
                left: 0
            })
        }
    }
});

$('#slider')[0].addEventListener('touchmove', function(event) {
    event.preventDefault();
    var el = event.target;
    var touch = event.touches[0];
    curX = touch.pageX - this.offsetLeft - 73;
    if(curX <= 0) return;
    if(curX > 230){
        $('#well').fadeOut();
    }
    el.style.webkitTransform = 'translateX(' + curX + 'px)'; 
}, false);

$('#slider')[0].addEventListener('touchend', function(event) {  
    this.style.webkitTransition = '-webkit-transform 0.3s ease-in';
    this.addEventListener( 'webkitTransitionEnd', function( event ) { this.style.webkitTransition = 'none'; }, false );
    this.style.webkitTransform = 'translateX(0px)';
}, false);

});

添加“disappear”类后，即使页面重新加载，我也想保持它的添加。我找到了一个有用的帖子 here , 但由于我是 Javascript 的初学者，我不确定如何在我的案例中使用它，如果有人能给我一个个性化的答案，我会很高兴。

提前致谢!

Answer 1

在$( "#well").addClass( "disappear");之后添加

localStorage['wellClass'] = 'disappear';

并在 $(function() { 下面的行中添加

previousWellClass = localStorage['wellClass'];
if (previousWellClass) $('#well').addClass(previousWellClass);