JavaScript

Question

我正在尝试使用 sessionStorage 保存复选框的状态。我对 JavaScript 很陌生，所以我的理解很基础。

我在网站上使用复选框来显示导航菜单。该复选框出现在网站的每个页面上（相同的 ID）。保存复选框状态的目的是在导航到新页面时使导航菜单已经"open"。目前，菜单 "jumps" 在页面更改时关闭，并破坏了 CSS 过渡效果的目的。

非常感谢任何帮助。

谢谢

这就是我目前得到的（从网络上截取的内容）。

JS:

<script type="text/javascript">
function checkFunction(){
    var checkbox = document.getElementById("nav-btn");
    checkbox.addEventListener("onChange",OnChange,false);
}
function save(){
    var nav-btn=document.getElementById("nav-btn").value;
    sessionStorage.setItem(nav-btn);
}
window.addEventListener("load",checkFunction,false);
</script>

HTML:

<input type="checkbox" id="nav-btn" class="nav-btn" />
<label for="nav-btn"></label>

Answer 1

您的 save() 需要一些更改才能使其正常工作：

function save(){
    var navBtnVal = document.getElementById("nav-btn").value;
    sessionStorage.setItem('navBtn',navBtnVal);
}

正如@Donte'Trumble 在您的评论中指出的那样，变量 nav-btn 是不正确的语法。那会抛出一个错误。变量名中不能有连字符。我已将名称更改为 navBtnVal。

sessionStorage.setItem()有两个参数，第一个是key，第二个是value。您试图将 value 设置为 key。即使这有效，你以后也不能用它做任何事情。我将它设置为 sessionStorage.setItem('navBtn',navBtnVal);。

现在要访问 navBtn 的值，您只需调用：sessionStorage.navBtn.

在您的 checkFunction() 中，您正在为复选框元素的任何更改创建一个侦听器。您的第二个参数正在传递 OnChange 的回调。我们需要查看此功能的代码。否则，我假设你想打电话给你的 save()。

checkbox.addEventListener("onChange",save,false);

更新

我已根据您在评论中提出的问题添加了额外的逻辑。我们确实需要额外的检查。还有一些对您当前代码的更改。我创建了一个 working example here.

//changed function name to be a bit more descriptive
//first we need to see if we have a value in sessionStorage that we should apply to the checkbox.
//Then we'll add our event listener. It should be 'change' not 'onchange'. It is passing the 'save' function as a callback.
//last we call 'toggleMenu()' to determine which state the menu should be in
function init() {
    var checkbox = document.getElementById("nav-btn");
    if (sessionStorage.navBtn == 'true') {
        checkbox.checked = true;
    } else {
        checkbox.checked = false;
    }
    checkbox.addEventListener("change", save);
    toggleMenu();
}

//this saves to sessionStorage. Note hoe I changed it to 'checked' instead of 'value'. Checked determines whether or not the checkbox is checked & returns true or false.
//last we call 'toggleMenu()' to determine which state the menu should be in
function save() {
    var navBtnVal = document.getElementById("nav-btn").checked;
    sessionStorage.setItem('navBtn', navBtnVal);
    toggleMenu();
}

//this alters the 'display' property to none or block depending on the value in sessionStorage.
function toggleMenu() {
    var navEl = document.getElementById('nav');
    if (sessionStorage.navBtn == 'false') {
        navEl.style.display = 'none';
    } else {
        navEl.style.display = 'block';
    }
}
//changed to use DOMContentLoaded. This waits for the page to load before executing. 
window.addEventListener("DOMContentLoaded", init);

JavaScript - 使用 sessionStorage 保存在文档之间共享的复选框状态

JavaScript - Save checkbox state shared between documents using sessionStorage

checkbox

sessionstorage