javascript - 如何在javascript中更改隐藏值？

Question

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

Javascript 文件

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

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

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

调用Darkmode功能的index.blade.php文件:

<button style="margin: 19px;" class="btn btn-dark" onclick="Darkmode(this);">
Darkmode
</button>

提前谢谢您!

Answer 1

如果刷新页面，值/状态就会消失，您的代码所做的就是将该值保存在全局 javascript store 中。像这样:

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

像这样得到它:

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

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

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