Question

在开发调查时，我使用本地存储暂时保存给定的答案。它工作得很好，对RadioButtons很感兴趣。 Chrome控制台显示可以保存这些值，直到用于显示已保存值的重新加载按钮为止。按重新加载后，本地存储不会更改保存的值。

//Save Values
function save() {
    //Radiobuttons  
    var g1 = document.querySelector('input[name=erarbeiten]:checked').value;
    localStorage.setItem("g1", g1);

//Restoring saved Values
function reload(){
    // Radiobuttons    
    var G1 = document.getElementsByName('erarbeiten');
    var val1 = localStorage.getItem('g1');  
    for (var i = 0; i < G1.length; i++) {
        if (G1[i].value == val1) {
            G1[i].checked = true;
        }
    }
}

// HTML中的Radiobuttons

<input type="radio" id="erarbeiten" name="erarbeiten" value="Ja"><label for="erarbeiten">Ja</label>
<input type="radio" id="erarbeiten2" name="erarbeiten" value="Nein"><label for="erarbeiten2">Nein</label>

//调用函数的按钮

<button onclick="save()" type="button" class="buttonw" style="vertical-align:middle">Save me!</button>

<button onclick="reload()" type="button" class="buttonw" style="vertical-align:middle">Load me!</button>

Answer 1

https://jsfiddle.net/krexkx15/7/

//call reload on page load
reload();

//add click functionality to radio buttons
Array.from(document.querySelectorAll('input[type="radio"]')).forEach(function(item, index) {
  item.addEventListener('click', save);
});

//Save Values
function save() {
  //Radiobuttons  
  var g1 = document.querySelector('input[name=erarbeiten]:checked');
  g1 = (g1) ? g1.value : '';
  localStorage.setItem("g1", g1);
}
//Restoring saved Values
function reload() {
  // Radiobuttons    
  // get a list of DOM elements
  var G1 = Array.from(document.getElementsByName('erarbeiten'));
  var val1 = localStorage.getItem('g1');
  for (var i = 0; i < G1.length; i++) {
    if (G1[i].value == val1) {
      G1[i].checked = true;
    }
  }
}

Radiobuttons上的本地存储

1 个答案: