Question

我无法绕过这个。我有这个复选框：

<input id="copy" name="varcopy" onkeyup="saveValue(this)" tabindex="4" 
form="contact_form_id" type="checkbox" value="sendacopy" checked="checked" />

如果在页面重新加载时选中或取消选中复选框，则需要存储（无论复选框是通过空格键还是通过鼠标点击激活/取消激活）。我想使用localStorage，在纯JavaScript中，没有jQuery。

我有这些函数来保存和恢复输入字段的值（它适用于所有文本输入，但不适用于复选框）：

function saveValue(e) {
    var id = e.id; 
    var val = e.value;
    localStorage.setItem(id, val);
}

function getSavedValue(v) {
    if (localStorage.getItem(v) === null) {
        return ""; 
    }
    return localStorage.getItem(v);
}

我在网上做了很多研究，但我无法找到我特别需要的东西。请温柔我，我是初学者。这就是我尝试用这两个函数做的事情，但它根本不起作用：

function saveValue(e) {
    var id = e.id; 
    var val = e.value;
    if (id == "copy") {
        val = e.checked;
    }
    localStorage.setItem(id, val);
}

function getSavedValue(v) {
    if (localStorage.getItem(v) === null) {
        return ""; 
    }
    if (v == "copy") {
        if (localStorage.getItem(v) == true)
            return "true";
        if (localStorage.getItem(v) == false)
            return "false";
    }
    return localStorage.getItem(v);
}

这是我调用getSavedValue()函数的方式：

document.getElementById("copy").value = getSavedValue("copy");

好的，我正在取得进展，这是我的复选框：

<input id="copy" name="varcopy" onkeyup="saveChecked(this)" 
onmouseup="saveChecked(this)" tabindex="4"                     
form="contact_form_id" type="checkbox" />

这些是我的功能：

function saveChecked(e) {
    var id = e.id; 
    var val = e.checked?1:0;
    localStorage.setItem(id, val); 
}

function getSavedValue(v) {
    if (localStorage.getItem(v) === null) {
        return ""; 
    }
    return localStorage.getItem(v);
}

这是调用：

document.getElementById("copy").checked = !!getSavedValue("copy");

问题是它总是默认为true，或者总是默认为false。它没有切换。

Answer 1

这可以简单地实现如下：

var isChecked = !!getSavedValue('someKey');
var checkbox = document.getElementById('copy');

checkbox.checked = isChecked;

!!getSavedValue('someKey');将函数返回的值转换为布尔值。空字符串，undefined和null将转换为false，其他任何内容都将转换为true。

Answer 2

这是修改后的saveValue功能，您可以使用它。

function saveValue(e) {
    var id = e.id; 
    var val = e.value;
    if(e.type === 'checkbox') {
        val = e.checked?1:0;
    }
    localStorage.setItem(id, val);
}

Answer 3

看来复选框上的checked属性返回true或false。（以某种方式，未选中时也是如此，选中时为假）问题是，如果我这样做：

val = e.checked?1:0;

它将始终返回1.我认为checked属性返回一个字符串，而不是布尔值，所以当我在JavaScript中执行上述操作时，它将始终是一个非空字符串，这意味着它将返回true。我不得不这样做：

var val = ""; 
if (e.checked != true) { //Not-equals because true is unchecked, false is checked
    val = "1";
}

现在它可以工作，复选框会在页面重新加载时记住它的状态。

Answer 4

以下示例将为您执行此操作... 享受......： - ）

<script>

function saveData(e) {
  let id = e.id; 
  let val;
  if (e.type === 'checkbox'){
    val = e.checked;
  }else{
    val = e.value;
  } 

  localStorage.setItem(id, val); 
}

function loadFieldData(id){
  let elm = document.getElementById(id);
  let value = localStorage.getItem(id);

  if (elm) {
    if (elm.type === 'checkbox') {
      elm.checked = Boolean(value);
    }else{
      elm.value = value;
    }
  }
}

function loadData() {
  loadFieldData('text1');
  loadFieldData('copy');
}

</script>

<body>

<input id="text1" onkeyup="saveData(this)" onchange="saveData(this)" type="text" />

<br/>

<input id="copy" onchange="saveData(this)" type="checkbox" />
<br/>
<br/>

<input type="button" onclick="loadData()" value="Load Data" />

</body>

使用vanillla JS

4 个答案: