localStorage - Получить значения флажка

Question

Я работаю с формой (сделанной с Bootstrap 4) и localStorage. Я использую его, чтобы я мог использовать значения ввода формы на другой странице. Он хорошо работает со входами, но в этой форме у меня также есть флажки, и я не могу найти, как сделать следующее: я хотел бы проверить, какие флажки отмечены. Для тех, кто отмечен, я хотел бы добавить текст метки флажка в localStorage, чтобы использовать его на моей другой странице. Как мне этого добиться?

Мой HTML выглядит так:

 <form role="form" id="form" data-toggle="validator">

    <div class="form-row">
      <div class="form-group col-md-12">
        <label for="inputAdresse">Adresse *</label>
        <input type="text" class="form-control places-autocomplete" name="inputAdresse" id="inputAdresse"
          required="required" placeholder="" value="" autocomplete=" address-line1" />
      </div>
    </div>

    <div class="form-row form-checks">
        <div class="form-group col-md-12 col-sm-6">
            <div class="custom-control custom-checkbox mb-2">
            <input type="checkbox" class="custom-control-input" id="checkAscenseur" name="check" value="Ascenseur">
            <label class="custom-control-label" for="checkAscenseur">Ascenseur</label>
            </div>

            <div class="custom-control custom-checkbox mb-2">
            <input type="checkbox" class="custom-control-input" id="checkCave" name="check" value="Cave">
            <label class="custom-control-label" for="checkCave">Cave</label>
            </div>

            <div class="custom-control custom-checkbox mb-2">
            <input type="checkbox" class="custom-control-input" id="checkParking" name="check" value="Parking">
            <label class="custom-control-label" for="checkParking">Parking</label>
            </div>
        </div>
    </div>
    <button class="nextBtn pull-right" type="submit" id="btn-submit">Submit</button>
</form>

Для ввода я использую следующий javascript:

document.getElementById("form").addEventListener("submit", callme);

function callme(event) {
  event.preventDefault();

  let inputAdresse = document.getElementById('inputAdresse');
  localStorage.setItem('inputAdresse', inputAdresse.value);

  window.location.href = "thank-you.html";
};

Answer 1

Вот рабочая ДЕМО о том, как делать то, что вам нужно.

Вам необходимо использовать свойство checked для флажков:

document.getElementById("form").addEventListener("submit", callme);

function callme(event) {
  event.preventDefault();

  let inputAdresse = document.getElementById('inputAdresse');
  localStorage.setItem('inputAdresse', inputAdresse.value);
  
  let checkAscenseur = document.getElementById('checkAscenseur');
  localStorage.setItem('checkAscenseur', checkAscenseur.checked);
  
  let checkCave = document.getElementById('checkCave');
  localStorage.setItem('checkCave', checkCave.checked);
  
  let checkParking = document.getElementById('checkParking');
  localStorage.setItem('checkParking', checkParking.checked);

  window.location.href = "thank-you.html";
};

UPD новый код, который сохраняет значения данных вместо true/false: DEMO .

Answer 2

Вы также можете сделать это следующим образом (почти так же, но немного более компактно):

document.getElementById("form").addEventListener("submit", callme);

function callme(event) {
  event.preventDefault();

  let inputAdresse = document.getElementById('inputAdresse');
  localStorage.setItem('inputAdresse', inputAdresse.value);

  new Array(...document.getElementById('form').getElementsByClassName('custom-control-input')).forEach(cb => {
    localStorage.setItem(cb.id, cb.checked);
  }

  window.location.href = "thank-you.html";
}

Я конвертирую HTMLCollection, полученную из .getElementsByClassName(...)функция в массив, который я могу перебрать с помощью .forEach().Если вы хотите сохранить значения по их идентификаторам, это прекрасно работает: P