Question

我有一个列表，其中有一个动态创建的复选框输入，当列表完成并使用完后，我想将列表中的选中项目存储到本地存储中。

（按下保存按钮时，我只需要存储选中的项目。）

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;  
    }
  }
}

Answer 1

您需要做的是查询所有复选框元素并对其进行遍历。您的代码当前选择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。您可以了解它们的差异on MDN

如何将列表中的所有选中项存储到本地存储中。（JavaScript）

1 个答案:

如何将列表中的所有选中项存储到本地存储中。 （JavaScript）

1 个答案:

如何将列表中的所有选中项存储到本地存储中。（JavaScript）