刷新后jQuery保存单击状态[重复]

Question

我创建了改变视图的函数。如果单击选项，则添加一些新类。但我想保存单击选项的状态，刷新页面后它应该显示刷新前单击的选项。我实现了 jQuery 选项$.cookie，但它看起来不起作用。我只有一个错误“$.cookie 不是函数”

 var gridOfThree = $('.mh-1on3--grid').on('click', function () {

    $('.mh-1on3--grid').addClass('mh-filters__right__button--active');
    $('.mh-1on2--grid').removeClass('mh-filters__right__button--active');
    $('.mh-1on1--grid').removeClass('mh-filters__right__button--active');
    $('.mh-margin-bottom-small').removeClass('mh-grid__1of2');
    $('.mh-margin-bottom-small').removeClass('mh-grid__1of1');
    $('.mh-margin-bottom-small').addClass('mh-grid__1of3');
    if (!$('#post-113').hasClass('mh-estate-vertical')) {
        $('#post-113').addClass('mh-estate-vertical');
    }
    $('#post-113').removeClass('mh-estate-horizontal');
    $('.wrap-div-to-change-look').removeClass('mh-estate-horizontal__inner');
    $('.vertical-to-horizontal-dynamic').removeClass('mh-estate-horizontal__right');
    $('.vertical-to-horizontal-dynamic').addClass('mh-estate-vertical__content');
    $('.vertical-to-horizontal-dynamic').css('height','275px');
    $('.mh-estate-vertical__date').css('left', '');
    if ($('div.mh-estate-horizontal__left').hasClass('mh-estate-horizontal__left')) {
        $('.mh-thumbnail').unwrap('<div class="mh-estate-horizontal__left"></div>');
    }
    $.cookie('gridOfThree', true);
    $.cookie('gridOfTwo', false);
    $.cookie('gridOfOne', false);

});

var gridOfTwo = $('.mh-1on2--grid').on('click', function () {

    $('.mh-1on2--grid').addClass('mh-filters__right__button--active');
    $('.mh-1on3--grid').removeClass('mh-filters__right__button--active');
    $('.mh-1on1--grid').removeClass('mh-filters__right__button--active');
    $('.mh-margin-bottom-small').removeClass('mh-grid__1of1');
    $('.mh-margin-bottom-small').removeClass('mh-grid__1of3');
    $('.mh-margin-bottom-small').addClass('mh-grid__1of2');
    if (!$('#post-113').hasClass('mh-estate-vertical')) {
        $('#post-113').addClass('mh-estate-vertical');
    }
    $('#post-113').removeClass('mh-estate-horizontal');
    $('.wrap-div-to-change-look').removeClass('mh-estate-horizontal__inner');
    $('.vertical-to-horizontal-dynamic').removeClass('mh-estate-horizontal__right');
    $('.vertical-to-horizontal-dynamic').addClass('mh-estate-vertical__content');
    $('.vertical-to-horizontal-dynamic').css('height','146px');
    $('.mh-estate-vertical__date').css('left', '');
    if ($('div.mh-estate-horizontal__left').hasClass('mh-estate-horizontal__left')) {
        $('.mh-thumbnail').unwrap('<div class="mh-estate-horizontal__left"></div>');
    }
    $.cookie('gridOfTwo', true);
    $.cookie('gridOfThree', false);
    $.cookie('gridOfOne', false);
});

var gridOfOne = $('.mh-1on1--grid').on('click', function () {
    $('.mh-1on1--grid').addClass('mh-filters__right__button--active');
    $('.mh-1on3--grid').removeClass('mh-filters__right__button--active');
    $('.mh-1on2--grid').removeClass('mh-filters__right__button--active');
    $('.mh-margin-bottom-small').removeClass('mh-grid__1of2');
    $('.mh-margin-bottom-small').removeClass('mh-grid__1of3');
    $('.mh-margin-bottom-small').addClass('mh-grid__1of1');
    $('#post-113').removeClass('mh-estate-vertical');
    $('#post-113').addClass('mh-estate-horizontal');
    $('.wrap-div-to-change-look').addClass('mh-estate-horizontal__inner');
    $('.vertical-to-horizontal-dynamic').addClass('mh-estate-horizontal__right');
    $('.vertical-to-horizontal-dynamic').removeClass('mh-estate-vertical__content');
    $('.vertical-to-horizontal-dynamic').css('height','146px');
    $('.mh-estate-vertical__date').css('left', '475px');
    if (!$('div.mh-estate-horizontal__left').hasClass('mh-estate-horizontal__left')) {
        $('.mh-thumbnail').wrap('<div class="mh-estate-horizontal__left"></div>');
    }
    $.cookie('gridOfOne', true);
    $.cookie('gridOfTwo', false);
    $.cookie('gridOfThree', false);
});
if ($.cookie('gridOfOne') == 'true') {
    $('.mh-1on1--grid').click();
} else if ($.cookie('gridOfTwo') == 'true') {
    $('.mh-1on2--grid').click();
} else if ($.cookie('gridOfThree') == 'true') {
    $('.mh-1on3--grid').click();
}

Answer 1

创建一个本地存储为

localStorage.setItem('key',value);

并从中获取结果

localStorage.getItem('key');