使用复选框更新localStorage项目

Question

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

考虑到我有一个id为"x"的复选框输入，这个脚本运行得很好：

$("#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"被设置为1。明亮的当页面加载并且输入为"on"时，它以另一种方式工作。

但是，就是这样。无论我如何切换输入，尽管勾号发生了变化，localStorage项目都不会更新！无论我是打开还是关闭勾号，我都会不断收到同样的信息，"Tickbox已经打开"。

它只适用于初始加载或重置localStorage值。

为什么会这样？如果没有刷新，我如何才能让它一次又一次地工作？

Answer 1

我已经创建了一个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");
    }
  });

Answer 2

您需要两样东西：

（1） 当加载文档时，该函数将根据localStorage中的值更改复选框的状态。类似以下（未经测试的）代码应该做的事情：

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

（2） 您需要将checkboxstore替换为localStorage.getItem('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);
    };
});