Setting Cookies

时间：2018-08-15 作者：Scott S.

我创建了两个主题（浅色和深色），但我不知道如何设置cookie，以便用户在页面之间导航或下周返回站点时，主题保持不变。是否有一个简单的脚本可以添加到现有代码中？

HTML

<html>
<head>
  <link id="lightTheme" rel="stylesheet" type="text/css" href="styleSheetLightTheme.css">
  <link id="darkTheme" rel="alternate stylesheet" type="text/css" href="styleSheetDarkTheme.css">
<script>
  function darkTheme() {
    var theme = document.getElementById(\'lightTheme\');
    theme.href = "styleSheetDarkTheme.css";
  }

  function lightTheme() {
    var theme = document.getElementById(\'lightTheme\');
    theme.href = "styleSheetLightTheme.css";
  }
</script>
</head>

<body>
<a href="#" onClick="darkTheme(); return false;">Dark Theme</a>
|
<a href="#" onClick="lightTheme(); return false;">Light Theme</a>
</body>
</html>

样式表暗主题。css

body {background-color: #333; font-family: verdana; color: #ccc;}
a:link, a:visited, a:active {color: #fff; text-decoration: none;}
a:hover {color: #0ff;}

styleSheetLightTheme。css

body {background-color: #eee; font-family: verdana; color: #333;}
a:link, a:visited, a:active {color: #000; text-decoration: none;}
a:hover {color: #0ff;}

2 个回复

最合适的回答,由SO网友:nmr 整理而成

Solution with cookie 【wordpress】

您将需要jQuery cookie plugin.
创建javascript文件“themechanger.js”：

(function($){

    var theme = $.cookie("styles");
    var themehref = document.getElementById(theme_styles.rel_id);

    setTheme = function(mode){
        if (theme == mode)
            return;
        if (mode == \'light\') {
            $.cookie(\'styles\', mode);
            themehref.href = theme_styles.light;
        }
        else if (mode == \'dark\') {
            $.cookie(\'styles\', mode);
            themehref.href = theme_styles.dark;
        }
    }
})(jQuery);

在中functions.php 排队样式和javascript：

add_action(\'init\', \'load_styles\', 15);
function load_styles() {

    $current_style = \'/styleSheetLightTheme.css\';
    if ( isset($_COOKIE[\'styles\']) && $_COOKIE[\'styles\'] == "dark")
        $current_style = \'/styleSheetDarkTheme.css\';
    wp_register_style( \'stylename\', get_stylesheet_directory_uri() . $current_style );
    wp_enqueue_style( \'stylename\');

    wp_enqueue_script( \'jquery_cookie\', get_template_directory_uri() . \'/js.cookie.js\', [\'jquery\'] );
    wp_register_script( \'theme_script\', get_template_directory_uri() . \'/themechanger.js\', [\'jquery\', \'jquery_cookie\'] );
    //
    // object "theme_styles" will store links to style, used in javascript
    wp_localize_script( \'theme_script\', \'theme_styles\', [
        \'light\' => get_stylesheet_directory_uri() . \'/styleSheetLightTheme.css\',
        \'dark\' => get_stylesheet_directory_uri() . \'/styleSheetDarkTheme.css\',
        \'rel_id\' => \'stylename-css\',
    ]);
    wp_enqueue_script(\'theme_script\');
}

要更改主题样式，请使用javascript函数setTheme()

<a href="javascript:;" onClick="setTheme(\'dark\'); return false;">Dark Theme</a><br>
<a href="javascript:;" onClick="setTheme(\'light\'); return false;">Light Theme</a>

<小时>Local storage [对于您的代码]：

<html>
<head>
  <link id="my_style" rel="stylesheet" type="text/css" href="styleSheetLightTheme.css">
</head>
<body>
    <script>
        var theme = localStorage.getItem(\'styles\');
        var themehref = document.getElementById(\'my_style\');
        var base_url = \'styleSheet{{mode}}.css\';

        // default value
        if(!theme)
            localStorage.setItem(\'styles\',\'light\');

        if (theme == \'dark\')
            themehref.href = base_url.replace(\'{{mode}}\', \'DarkTheme\');
        else
            themehref.href = base_url.replace(\'{{mode}}\', "LightTheme");

        function setTheme(mode){
            if ( (mode != \'light\' && mode != \'dark\'))
                return;

            theme = localStorage.getItem(\'styles\');
            // don\'t change if it\'s already active
            if (mode == theme)
                return;
            if (mode == \'light\') {
                localStorage.setItem(\'styles\', \'light\');
                themehref.href = base_url.replace(\'{{mode}}\', \'LightTheme\');
            }
            else if (mode == \'dark\') {
                localStorage.setItem(\'styles\', \'dark\');
                themehref.href = base_url.replace(\'{{mode}}\', \'DarkTheme\');
            }
        }
    </script>

    <a href="javascript:;" onClick="setTheme(\'dark\'); return false;">Dark Theme</a>
    |
    <a href="javascript:;" onClick="setTheme(\'light\'); return false;">Light Theme</a>
</body>
</html>

SO网友:Serkan Algur

您可以使用Local Storage. 它使用起来非常简单，而且是纯JavaScript。受所有现代浏览器支持(according to caniuse website).

您可以使用此代码；

<script>
var theme_var = localStorage.getItem(\'styles\');
var themehref = document.getElementById(\'lightTheme\');

if(!theme_var) {
    localStorage.setItem(\'styles\',\'lightTheme\');
    themehref.href = "styleSheet"+localStorage.getItem(\'styles\')+".css";
} else {
    themehref.href = "styleSheet"+theme_var+".css";
}

function setThemeItem(themevar){
    themehref.href = "styleSheet"+theme_var+".css";
    localStorage.setItem(\'styles\',themevar);
}
</script>

//Usage
<a href="javascript:;" onClick="setThemeItem(\'darkTheme\'); return false;">Dark Theme</a>
<a href="javascript:;" onClick="setThemeItem(\'lightTheme\'); return false;">Light Theme</a>

结束

小码农CODE

Setting Cookies

相关推荐

Cookies in template