使用复选框更新localStorage项目

基本上，我想切换打开或关闭复选框，并将该设置分别保存为localStorage项目中的1或0。该设置需要为用户存储。使用复选框更新localStorage项目

考虑到我有一个复选框，输入与“X”的ID，这个脚本完美的作品：

$("#x").click(function() { 
    if (checkboxstore == false) { 
     alert("Tickbox has been turned on"); 
     localStorage.setItem("checkboxstore", 1); 
    } else if (checkboxstore == true) { 
     alert("Tickbox has been turned off"); 
     localStorage.setItem("checkboxstore", 0); 
    }; 
});

不过不幸的是，它只能使用一次。该页面加载，输入被“关闭”，我点击输入，和我得到的警报

“Tickbox已经开启”

和localStorage的项目“Tickbox”设置为辉煌。当页面加载并且输入处于“打开”状态时，它可以工作。

但是，就是这样。无论切换输入多少，尽管更改了tick，localStorage项目仍未更新！我不断地得到了同样的信息“” Tickbox已经开启”不管我是否打开打勾或关闭的。

它仅适用于初始加载或重置价值的localStorage。

为什么是这样吗？我怎样才能得到它一遍又一遍，而不刷新工作？

来源

2013-07-29 Starkers

你需要两件事：

（1）当文档加载时，将根据localStorage中的值更改复选框的状态。像下面的（未经测试）代码的东西应该做的事：

$(document).ready(function() { 
    if(localStorage.getItem('checkboxstore')) { 
    $('#x').prop('checked', 'checked'); 
    } else { 
    $('#x').removeProp('checked'); 
    } 
});

（2）你需要用localStorage.getItem('checkboxstore')更换checkboxstore。它现在检查一个不存在的变量。

$("#x").click(function() { 
    if (localStorage.getItem('checkboxstore') == false) { 
     alert("Tickbox has been turned on"); 
     localStorage.setItem("checkboxstore", 1); 
    } else { 
     alert("Tickbox has been turned off"); 
     localStorage.setItem("checkboxstore", 0); 
    }; 
});

来源

2013-07-29 12:13:24 Sumurai8

我创建了一个plunker，如果你愿意，你可以用它玩。 http://plnkr.co/edit/iYLFc8V1PzZ5tBJu16g5?p=preview

$("#x").change(function(e) { 
     if (e.currentTarget.checked) { 
     console.log("true"); 
    } else if (e.currentTarget.checked) { 
     console.log("false"); 
    } 
    });

来源

2013-07-29 12:11:22

使用复选框更新localStorage项目

回答

相关问题