Javascript 在“重新加载”页面上的localstorage中保存对象上的CSS类

我想做的是，在用户重新刷新页面时保存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);

$（函数（）{
$（“#滑块”）.draggable({
轴：“x”，
包含：'父'，
拖动：函数（事件、ui）{
如果（ui.position.left>230）{
$（“#well”）.fadeOut（）；
$（“#嗯”）.addClass（“消失”）；
}否则{
//显然Safari不允许背景剪辑的文本部分不透明？不确定。
//$（“h2 span”）.css（“不透明度”，100-（ui.position.left/5））
}
},
停止：功能（事件、用户界面）{
如果（ui.position.left<231）{
$（此）。设置动画({
左：0
})
}
}
});
$（“#滑块”）[0]。addEventListener（'touchmove'，函数（事件）{
event.preventDefault（）；
var el=事件目标；
var touch=event.touch[0]；
curX=touch.pageX-this.offsetLeft-73；
如果（电流230）{
$（'#well'）.fadeOut（）；
}
el.style.webkitttransform='translateX（'+curX+'px'）；
}，假）；
$（'#slider'）[0]。addEventListener（'touchend'，函数（事件）{
this.style.webkitTransition='-webkit转换0.3s易用'；
addEventListener（'WebKittTransitionEnd'，函数（事件）{this.style.WebKittTransition='none'；}，false）；
this.style.webkitttransform='translateX（0px）'；
}，假）；

}))

当类“消失”被添加时，即使页面重新加载，我也希望继续添加它。我发现了一篇有用的帖子，但由于我是Javascript的初学者，我不知道如何在我的案例中使用它，如果有人能给我一个个性化的答案，我会非常高兴

提前谢谢

在

$（“#well”）.addClass（“消失”）添加

localStorage['wellClass'] = 'disappear';

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

在下面的
$（function（）{
添加

localStorage['wellClass'] = 'disappear';

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

这将为您完成大部分工作

var setClass = JSON.parse(localStorage.getItem('setClass')) || {};
$.each(setClass, function () {
    $(this.selector).addClass(this.className);
});
var addClassToLocalStorage = function(selector, className) {
    setClass[selector + ':' + className] = {
        selector: selector,
        className: className
    };
    localStorage.setItem('setClass', JSON.stringify(setClass));
};
var removeClassFromLocalStorage = function(selector, className) {
    delete setClass[selector + ':' + className];
    localStorage.setItem('setClass', JSON.stringify(setClass));
};

然后你可以这样做：

$("#well").fadeOut();
$("#well").addClass("disappear");
addClassToLocalStorage('#well', 'disappear');
// remove it removeClassFromLocalStorage('#well', 'disappear');


如果以后需要的话，您可以重新使用它。
太好了，这只需要很少的工作就可以实现！但是，它似乎在iPhone上不起作用……对此有什么想法吗？