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.很棒。当页面加载并且输入为“打开”时，它的工作方式正常。

但是，就是这样。无论我切换输入多少，尽管勾选更改，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);
    };
});

使用复选框更新localStorage项目

2 个答案: