Блог

Главная - Вопросы по программированию - Как сохранить все отмеченные элементы из списка в локальное хранилище. (Javascript)

Как сохранить все отмеченные элементы из списка в локальное хранилище. (Javascript)

#javascript #arrays #list #checkbox #local-storage

#javascript #массивы #Список #флажок #локальное хранилище

Вопрос:

У меня есть список с динамически созданными входными данными checkbox, и когда список будет завершен, и вы закончите его использовать, я хочу сохранить отмеченные элементы из списка в localstorage.

(Мне нужно сохранять только отмеченные элементы при нажатии кнопки сохранения.)

HTML:

 <template id = "index.html">
                <ons-page id=tab1>
                <div id="listac">LISTA</div>
                <ons-list id="products">
                    <!-- HERE IS WHERE I ADD THE CHECKBOX ITEMS-->
                </ons-list>

                <ons-speed-dial position="bottom right" direction="left">
                <ons-fab>
                  <ons-icon icon="fa-cog"></ons-icon>
                </ons-fab>
                <ons-speed-dial-item ONCLICK="savefunction()"> <!--THIS IS THE BUTTON THAT "SAVES".-->
                  <ons-icon id = "consolidar"  icon="fa-cart-arrow-down"></ons-icon>
                </ons-speed-dial-item>
                <ons-speed-dial-item >
                  <ons-icon id = "anadir" icon="fa-plus" ></ons-icon>
                </ons-speed-dial-item>
                </ons-speed-dial>

                </ons-page>
            </template>

Js:

 function add_checkbox_item(){

  var product = document.getElementById('addirp').value;
  var text_product = document.createTextNode(product);
  var checkbox_product = document.createElement('ons-checkbox')
  checkbox_product.appendChild(text_product);
  var finall_product = document.createElement('ons-list-item');
  finall_product.appendChild(checkbox_product);
  finall_product.classList.add("products");

  document.getElementById('productos').appendChild(finall_product);

  dialog = document.getElementById('dialog1'); 
  dialog.hide();  

}; 

function savefunction(){
  // HERE IS WHERE I START GETTING LOST

  var checkedValue = null; 
  var inputElements = document.getElementsByClassName('products');
  for(var i=0; inputElements[i];   i){
    if(inputElements[i].checked){
      checkedValue = inputElements[i].value;
      break;  
    }
  }
}

Комментарии:

1. Привет, добро пожаловать в SO! Не совсем уверен, чего вы хотите достичь. Прав ли я в том, что вы хотите сохранить значение каждого отдельного флажка localStorage , как только оно будет установлено? Или вы хотите сохранить значения всех флажков, как только пользователь нажмет кнопку или что-то в этом роде? Спросили наоборот: когда вы хотите сохранить значение (значения) / какое взаимодействие с пользователем запускает сохранение? ОТРЕДАКТИРУЙТЕ Также, пожалуйста, добавьте свой HTML-код к вопросу. Заранее спасибо

2. Привет, мне нужно создать что-то вроде списка покупок, поэтому вы должны иметь возможность добавлять элементы (которые будут отображаться в списке как флажки), которые вы «проверите», когда они у вас будут. После этого, когда вы нажимаете кнопку сохранить, он должен сохранять только проверенные значения. Так что да, все будет так, как ты говоришь «… хотите сохранить значения отмеченных флажков, как только пользователь нажимает кнопку »

Ответ №1:

Что вам нужно сделать, так это запросить все элементы checkbox и выполнить итерацию по ним. В настоящее время ваш код выбирает ons-list-item элементы вместо флажков.

Во-первых, начните с того, что заставьте функцию выбрать правильные элементы:

 function savefunction(){
  var checkboxes = document.querySelectorAll('.products'); // <-- select the checkboxes
  for (var i = 0; i < checkboxes.length; i  = 1) { // <-- iterate
    if (checkboxes[i].checked) {
      // store values  
    } else { // <-- this branch is optional (I don't know if you need it)
      // remove previously stored values
    }
  }
}

Как вы можете видеть, я также добавил else ветку на случай, если вы также захотите удалить ранее сохраненное значение, когда пользователь снимет ранее установленный флажок. Однако, если вам это не нужно, просто удалите else ветку.

С этого момента у вас есть две возможности: вы можете либо сохранить каждый установленный флажок отдельно в localStorage , либо вы можете сохранить список всех установленных флажков.

Каждая коробка отдельно (не забудьте удалить else ветку, если она вам не нужна)

 function savefunction(){
  var checkboxes = document.querySelectorAll('.products');
  for (var i = 0; i < checkboxes.length; i  = 1) {
    if (checkboxes[i].checked) {
      localStorage.setItem(checkbox[i].name, checkbox[i].value); // <-- stores a value
    } else {
      if (localStorage.getItem(checkbox[i].name)) { // <-- check for existance
        localStorage.removeItem(checkbox[i].name); // <-- remove a value
      }
    }
  }
}

Список всех ящиков

 function savefunction(){
  var checkboxes = document.querySelectorAll('.products');
  var checked = {};
  for (var i = 0; i < checkboxes.length; i  = 1) {
    if (checkboxes[i].checked) {
      checked[checkbox[i].name] = checkbox[i].value;
    }
    // <-- no need for else, because we simply override
  }
  localStorage.setItem('checked_boxes', JSON.stringify(checked)); // <-- localStorage can only store `String` values
}

При использовании второго подхода не забудьте вызвать JSON.parse сохраненные значения, когда вы хотите их использовать (это только для демонстрационных целей).:

 function restoreCheckboxes (checkboxElements) {
  var checkboxStates = localStorage.getItem('checked_boxes'),
      i;
  if (checkboxStates) {
    checkboxStates = JSON.parse(checkboxStates); // <-- parse string to object
    for (i = 0; i < checkboxElements.length; i  = 1) {
      if (checkboxStates.hasOwnProperty(checkboxElements[i].name)) {
        checkboxElements[i].checked = true;
      }
    }
  }
}

Еще один момент заключается в следующем: хотите ли вы сохранять эту информацию между различными сеансами или только до тех пор, пока активен текущий сеанс? Если последнее верно, рассмотрите возможность использования sessionStorage вместо localStorage . Вы можете прочитать об их различиях на MDN

Ответ №2:

Этот код точно будет работать.

Сделайте уникальными флажки с параметрами имени. Нажмите кнопку вызова функции Первая функция для сохранения значений и вторая функция для восстановления значений из локального хранилища

 function savefunction(){

  var checkboxes = document.querySelectorAll('.products');

  var checked = {};
  for (var i = 0; i < checkboxes.length; i  = 1) {
    if (checkboxes[i].checked) {
      checked[checkboxes[i].name] = checkboxes[i].value;
    }
    // <-- no need for else, because we simply override
  }
  localStorage.setItem('checked_boxes', JSON.stringify(checked)); // <-- localStorage can only store `String` values

}





function restoreCheckboxes () {

  var checkboxElements = document.querySelectorAll('.products');
  var checkboxStates = localStorage.getItem('checked_boxes');
 
  if (checkboxStates) {
    checkboxStates = JSON.parse(checkboxStates); // <-- parse string to object
    for (i = 0; i < checkboxElements.length; i  = 1) {
      if (checkboxStates.hasOwnProperty(checkboxElements[i].name)) {
        checkboxElements[i].checked = true;
      }
    }
  }
}

    
 <body onload="restoreCheckboxes()">
<div class="box1">
  <div class="box2">
     iWork for iColud 
  </div>  
<div class="box3">
<input type="checkbox" name="bixby1"  onclick="savefunction()" class="products">
</div></div>


<div class="box1">
  <div class="box2">
     iWork for iColud 
  </div>  
<div class="box3">
<input type="checkbox" name="bixby2" onclick="savefunction()" class="products">
</div></div>

<div class="box1">
  <div class="box2">
     iWork for iColud 
  </div>  
<div class="box3">
<input type="checkbox" name="bixby3" onclick="savefunction()" class="products">
</div></div>



</body>

Метки: