j查询在刷新后保存单击状态

Question

我创建了更改视图的函数。如果单击了选项，则添加一些新类。但是我想保存单击选项的状态，并在刷新页面后显示刷新前单击的选项。我$.cookie实现了jQuery选项，但看起来它不起作用。我只有一个错误"$.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');