使用vanillla JS在重新加載頁面時保持復選框處於選中狀態或未選中狀態

Question

我無法解決這個問題。 我有這個復選框：

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

我需要存儲是否在重新加載頁面時選中了該復選框（無論該復選框是通過空格鍵還是通過鼠標單擊激活/禁用）。 我想在純JavaScript中使用localStorage，而不使用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。 （以某種方式在未選中時也為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 個解決方案

解決方案1
1 2018-03-07 12:57:27

解決方案2
1 2018-03-07 13:19:42

解決方案3
0 已采納 2018-03-07 15:08:50

解決方案4
0 2018-03-07 15:57:45

使用vanillla JS在重新加載頁面時保持復選框處於選中狀態或未選中狀態

問題描述

4 個解決方案

解決方案1 1 2018-03-07 12:57:27

解決方案2 1 2018-03-07 13:19:42

解決方案3 0 已采納 2018-03-07 15:08:50

解決方案4 0 2018-03-07 15:57:45

解決方案1
1 2018-03-07 12:57:27

解決方案2
1 2018-03-07 13:19:42

解決方案3
0 已采納 2018-03-07 15:08:50

解決方案4
0 2018-03-07 15:57:45