0

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

我在网站上使用复选框来显示导航菜单。此复选框出现在网站的每个页面上（相同的 ID）。保存复选框状态的目的是让导航菜单在导航到新页面时已经“打开”。目前，菜单“跳转”在页面更改时关闭，这违背了 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>
4

1 回答 1

0

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

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

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

sessionStorage.setItem()有2个参数，第一个是key，第二个是value。您试图将 a 设置value为key. 即使这行得通，您以后也无法对此做任何事情。我将其设置为sessionStorage.setItem('navBtn',navBtnVal);.

现在要访问您的值，navBtn您可以简单地调用：sessionStorage.navBtn。

在您checkFunction()中，您正在为复选框元素的任何更改创建一个侦听器。您的第二个参数是传递OnChange. 我们需要查看这个函数的代码。否则，我假设您想调用您的save(). 

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

更新

我根据您在评论中的问题添加了额外的逻辑。我们确实需要额外的检查。并且还对您当前的代码进行了一些更改。我在这里创建了一个工作示例。

//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);
于 2015-02-17T16:05:59.693 回答