如何在cookie中保存jQuery CSS操作？

我在我的Wordpress网站上得到了这段代码，它允许用户在单击通过HTML生成的3个按钮之一时更改body{}的字体大小：

<button class='body_standard_font_size'>Standard</button>
<button class='body_medium_font_size'>medium</button>
<button class='body_big_font_size'>big</button>


jQuery(document).ready(function(){
  jQuery('.body_standard_font_size').on('click', function() {
    jQuery('body').css('font-size','100%');
});
});
jQuery(document).ready(function(){
  jQuery('.body_medium_font_size').on('click', function() {
    jQuery('body').css('font-size','150%');
});
});
jQuery(document).ready(function(){
  jQuery('.body_big_font_size').on('click', function() {
    jQuery('body').css('font-size','200%');
});
});

现在，我尝试将下面的jQuery cookie添加到同一个钩子中，结果如下：

add_action( 'wp_enqueue_scripts', 'menu_scripts' );
function menu_scripts() {
wp_enqueue_script(
    'custom',
    get_stylesheet_directory_uri() . '/js/custom.js',
    array( 'jquery' )
);
        }

function menu_scripts() {
wp_enqueue_script(
    'jquery.cookie',
    get_stylesheet_directory_uri() . '/js/jquery.cookie.js',
    array( 'jquery' )
);
        }

但是页面不再加载。我甚至不知道我是否正确调整了代码…

您可以使用localStorage（不会过期）或sessionStorage（在浏览器关闭时过期）

因此，您可以像这样尝试s.th：

$(document).ready(function(){
    $('.body_standard_font_size').on('click', function() {
        $('body').css('font-size','100%');
        localStorage.setItem('font-size', '100%');
    });

   ... //equivalent to the other click-functions

   //and on page load:
   var fontsize = localStorage.getItem('font-size');
   $('body').css('font-size', fontsize);
});

重构代码：无需在

$（document.ready（）

中包装每个单击事件。您可以使用一个就绪的处理程序包装所有函数

我不知道您是否可以编辑html，但您可以稍微收紧代码，我的建议如下：

HTML

如果要使用cookie，可以使用以下设置cookie：

document.cookie = "font-size=100%";

和它一起

document.cookie;

但在这里，您必须将cookie拆分为各个部分以获得实际的字体大小，因此我建议使用webStorage

参考

---

注意：这是所有主要浏览器和IE>=8的支持。请研究下面的方法，并根据需要进行调整

function fontExpand(){        
        var fontExpand = $('body').css('font-size','100%');
        $.cookie('font-grew', true, {path: '/'});

    }
     console.log('my font grew.');
    // - checks the font size above
    if($.cookie('font-grew')){
        console.log('font grows automatically...');
        fontExpand();

    }

        // Increase the font size on click
    $('.body_standard_font_size').click(function () {

           fontExpand();

    });

标准
小的
大的
$（“.changefont”）。单击（函数（）{
var font=$（this.data（“font”）；
$（“h2”）.html（字体）；
$.ajax({
url:“fontsave.php”，
方法：“张贴”，
数据：“font=“+font，
成功：函数（html）{
警报（html）；
}
});
});

您可以使用会话存储。然后只存储上次单击的名称。您的控制台或错误日志中有错误吗？是：“加载资源失败：服务器响应状态为500（内部服务器错误）”@Daniel，据我所知，会话存储仅适用于IE 8及以上版本，但我也想支持旧IE。嘿，经验感谢您的详细回答。易访问性对站点非常重要，旧IEs也应该得到支持。。。当我试图将所有jQuery放在一个.ready处理程序中时，我无法让它正常工作。我对jQuery和Javascript真的很陌生，这是我的第一段代码，我自己都没有写。嘿，Sleek Geek只是想再次问一下，你是否可以在@Sleek Geek之后简单地查看一下编辑过的帖子，并最终帮助我。我会在有机会的时候看看。

document.cookie = "font-size=100%";

document.cookie;

function fontExpand(){        
        var fontExpand = $('body').css('font-size','100%');
        $.cookie('font-grew', true, {path: '/'});

    }
     console.log('my font grew.');
    // - checks the font size above
    if($.cookie('font-grew')){
        console.log('font grows automatically...');
        fontExpand();

    }

        // Increase the font size on click
    $('.body_standard_font_size').click(function () {

           fontExpand();

    });