Question

我做了一个深色模式功能，可以更改应用程序的背景颜色和文本颜色。效果很好，但问题是当我转到value="dark"上的其他页面时，值属性被重置，value="light"中有一个新页面。我必须将暗模式值发送到其他页面。

我搜索了我的问题，发现我无法使用$ajax（因为url是固定的）。我知道如何使URL和url/foo?bar=value之类的$_GET['bar']参数等于值，但是我不知道将此类代码放在哪里。

// This is in the <head> of base.blae.php
    <button id="dm" style="margin: 19px;" class="btn btn-dark" name="mode" value="light" onclick="
        Darkmode(this);
    ">Darkmode</button>

// JS file
function Darkmode(self){ 
    if($('#dm').val() === 'light'){
        Color.backgroundColor('DarkSlateGray');
        Color.textColor('white');
           $('#dm').val('dark');
    } else {
        Color.backgroundColor('white');
        Color.textColor('black');
           $('#dm').val('light');
    }
}

我想使用php URL参数。例如，使url像这样http://localhost:8000/events?mode=dark并获得值$_get['mode']。我知道JS是客户端，而PHP是服务器端。但是我认为有一种方法可以使这项工作生效。您可以用代码解释它，我应该放在哪里？谢谢你们！

Answer 1

使用localstorage / sessionstorage来保存/获取状态

function Darkmode(self){ 
    if($('#dm').val() === 'light') {
        Color.backgroundColor('DarkSlateGray');
        Color.textColor('white');
           $('#dm').val('dark');
           localStorage.setItem('mode', 'dark');//set the state if the user pushes the button
    } else {
        Color.backgroundColor('white');
        Color.textColor('black');
           $('#dm').val('light');
           localStorage.setItem('mode', 'light');
    }
}


var mode = localStorage.getItem('mode');//get the state from storage when you navigate to a new page
if(mode === 'dark')  { // if the mode is black we change the colors, if no state is stored (or is white) we keep it white
           Color.backgroundColor('white');
           Color.textColor('black');
           $('#dm').val('light');
           localStorage.setItem('mode', 'light');

    } else {
           Color.backgroundColor('DarkSlateGray');
           Color.textColor('white');
           $('#dm').val('dark');
           localStorage.setItem('mode', 'dark');
    }

如果要使用get参数，则需要执行以下操作

 var mode = '<?php echo isset($_GET['mode'])?$_GET['mode']:"light";?>';//create a js variable using php ternary operator
        if(mode === 'light') {
            Color.backgroundColor('DarkSlateGray');
            Color.textColor('white');
               $('#dm').val('dark');

        } else {
            Color.backgroundColor('white');
            Color.textColor('black');
               $('#dm').val('light');

        }

如何使用php $ _GET传递和获取jQuery中的URL参数？

1 个答案: