Question

我做了一个darkmode函数，它可以更改应用程序的背景颜色和文本颜色。它工作正常，但问题是当我转到value =“ dark”上的其他页面时，值属性被重置，新页面处于value =“ light”中。我必须将暗模式值发送到其他页面。我该怎么办？

JavaScript文件

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/custom_end_icon"
    android:hint="Hint text"
    style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox"
    app:boxStrokeColor="@color/text_input_selector"
    app:endIconMode="custom"
    app:endIconDrawable="@drawable/ic_add_24px"
    app:endIconTint="@color/text_input_selector"

base.blade.php标签的一部分：

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');
    }
}

调用Darkmode函数的index.blade.php文件：

<input type="hidden" id="dm" name="darkmode" value="">
</head>

提前谢谢！

Answer 1

如果刷新页面，则值/状态消失了，您编写的代码是将值保存在全局javascript store中，如下所示：

localStorage.setItem('mode','dark');

像这样得到它：

var currentMode = localStorage.getItem('mode');

并在每次页面加载时检查该状态。

您还可以将该值保存到数据库中，并查询用户正在进入的模式，我将在users表中创建一个单独的列，并在那里更新单个用户的状态。

Answer 2

尝试使用本地存储

function Darkmode(self){ 
    const mode = localStorage.getItem("mode");
    if(mode) {      
        if(mode === 'light') {
            Color.backgroundColor('DarkSlateGray');
            Color.textColor('white');           
            localStorage.setItem("mode", "dark");
        }
        else {
            Color.backgroundColor('white');
            Color.textColor('black');
            localStorage.setItem("mode", "light");
        }
    }

    // default if no setting saved
    else {
        Color.backgroundColor('white');
        Color.textColor('black');
        localStorage.setItem("mode", "light");  
    }
}

Answer 3

您的Darkmode()函数运行良好，但仅在您当前的页面中有效，因为每次您重定向到新页面或刷新页面时，JS都会重新呈现。

如果您希望该值是持久的，则可以将其存储在本地存储中，或将其作为 URL参数传递。然后，您可以在每个页面的初始化中获取值

Answer 4

要在网址中添加get变量，您的表单操作应类似于

<form id="myForm" action="{{ route('events.index') }}?mode=dark"> <input style="margin: 19px;" class="btn btn-dark" name="mode" value="dark" type="submit" > </form>

通过javascript，您可以通过以下代码检索它们：

function getGetVariables(){
    var get_variables = new Object(); 
    get_variables = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m, key, value) { get_variables[key] = value; }); 
    console.log(get_variables);

     return get_variables;
}

这样，您就可以在javascript对象中使用PHP $ _GET数组替换项。但是每次重新加载页面时，都必须检查get_variables.mode值。为了使脚本有效，诀窍是在每页准备就绪的文档中触发Darkmode功能

因此您的Darkmode功能变为

function Darkmode(){ 
    var urlVars = getGetVariables();
    var formUrl = document.getElementById("myForm").action.split('?');
    if(urlVars.mode === 'light'){
        /* do something */

       document.getElementById("myForm").action = formUrl[0] + '?mode=dark';
    } else if(urlVars.mode === 'dark') { 
        /* do something else */
       document.getElementById("myForm").action = formUrl[0] + '?mode=light;
    }
}

通过javascript，您可以通过这种方式触发darkmode功能

window.onload="Darkmode()";

或以这种方式在主体加载时使用HTML

<body onload="Darkmode()">

还应考虑在未定义？mode =的情况下引入默认值

但是，如Jelle Bruisten和Utdev所建议的那样，使用浏览器localstorage是一种很好的方法，可以为SEO保留漂亮的URL。

如何在javascript中获取更改的隐藏值？

4 个答案: