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

debugcn 发表于 Dev

绒毛

我有一个带有动态创建的复选框输入的列表，当列表完成并且您完成使用它时，我想将列表中选中的项目存储到 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;  
    }
  }
}

大卫

您需要做的是查询所有复选框元素并遍历它们。您的代码当前选择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 上阅读它们的差异