javascript - jQuery 刷新后保存点击状态

Question

这个问题已经有答案了:

jQuery $.cookie is not a function (7 个回答)

已关闭 5 年前。

我创建了更改 View 的函数。如果单击选项，则添加一些新类。但我想保存单击选项的状态，并且在刷新页面后它应该显示刷新前单击的选项。我实现了 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');