0

基本上，我想打开或关闭一个复选框，并将此设置分别保存为 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);
    };
});

可悲的是，它只工作一次。页面加载，输入为“关闭”，我单击输入，然后收到警报

“复选框已打开”

并且 localStorage 项“Tickbox”设置为 1。 非常棒。当页面加载并且输入为“打开”时，它的工作方式相反。

但是，就是这样。无论我如何切换输入，尽管刻度发生变化，localStorage 项目都不会更新！无论我是打开还是关闭刻度，我都会不断收到相同的消息，“复选框已打开”。

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

为什么是这样？如何在不刷新的情况下让它一遍又一遍地工作？

4

2 回答 2

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");
    }
  });
于 2013-07-29T12:11:22.473 回答
0

你需要两件事：

(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);
    };
});
于 2013-07-29T12:13:24.257 回答