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

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

0 голосов
/ 17 апреля 2019

У меня есть список с динамически создаваемыми флажками ввода, и когда список готов и вы его используете, я хочу сохранить отмеченные элементы из списка в хранилище localalstorage.

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

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 Ответ

0 голосов
/ 18 апреля 2019

Что вам нужно сделать, это запросить все элементы-флажки и выполнить их итерацию.Ваш код в настоящее время выбирает элементы 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

...