jquery - 页面刷新后如何保留 Cookie 值

Question

我正在为用户创建一个演示面板，以便在他们到达我的演示站点时更改 Wordpress 主题的布局。用户通过选择下拉框更改值，此时设置 cookie。

我无法在页面刷新后显示我想要实现的操作。所以 cookie 保存了它的价值，但是在页面刷新后，我的 CSS 操作不会保留在原地。我对 jQuery 不是很好，所以任何帮助都将不胜感激。这是代码：

$('#montage-demo-panel select.body-style-layout').change(function () {

        // Apply cookie
        $.cookie('body-style-layout', $(this).val(), { path: '/' });

                    var value = $(this).val();
                    if (value == 'fixed') {
                    var wrapper = $('#wrapper');
                    var header = $('#header');
                    var masthead = $('#masthead');
                    var branding = $('#branding');

                    wrapper.removeAttr('style');
                    header.removeAttr('style');
                    masthead.removeAttr('style');
                    branding.removeAttr('style');

                    wrapper.removeClass('wrapper-full purple-header-full');
                    header.removeClass('header-full');
                    masthead.removeClass('masthead-full');
                    branding.removeClass('branding-full');
                    location.reload();

                   } else {

                    var wrapper = $('#wrapper');
                    var header = $('#header');
                    var masthead = $('#masthead');
                    var branding = $('#branding');
                    var mainbg = $('#main-bg');
                    var access = $('#access');

                    wrapper.removeClass('purple-header');

                    wrapper.addClass('wrapper-full purple-header-full');
                    header.addClass('header-full');
                    masthead.addClass('masthead-full');
                    branding.addClass('branding-full');
                    mainbg.addClass('main-bg-full');
                    access.addClass('access-full');

        // Re-fresh page
        location.reload();
                }
    });

Answer 1

...如果您只是在change();事件上应用样式，它肯定不会影响页面刷新。我建议每次刷新页面时检查 cookie 值，例如：

$(function(){
   var cookieval = $.cookie('cookie-key');
   if (cookieval === 'something'){
      //here implement style according to 'something'
   } else {
      //here implement another style
   }
});

祝你好运 ！！

更新 ：

1. 将代码放在页面中的任何位置；

2. 只需设置 cookie 并在选择更改时重新加载；像：

    $('#montage-demo-panel select.body-style-layout').change(function () {
       $.cookie('body-style-layout', $(this).val(), { path: '/' });
       location.reload();
    }
   

3. 完毕。