保存在本地存储附加的复选框状态答案

【问题标题】：Save on localstorage appended checkbox state保存在本地存储附加的复选框状态
【发布时间】：2019-11-30 16:57:07
【问题描述】：

我有这个功能：

function test() {
    var a = document.getElementById('test');
    var b = document.createElement('input');
    b.type = 'checkbox';
    b.addEventListener( 'change', function() {
    if(this.checked) {
       //do something and save the state (checked)
    } else {
       //do something else and save the state(not checked)
    }
}

我想从附加的复选框中将复选框的状态保存在 localstorage 上，最好的方法是什么？

【问题讨论】：

标签： javascript checkbox append local-storage

【解决方案1】：

因此，如果您要附加多个复选框，并且您可能希望分别设置它们的所有数据，您将需要为每个复选框设置不同的 id，因此当您附加一个新复选框时，我会增加 id


//function that appends new checkbox

var i = 0;
function appendCheckBox(){
    i++
    checkBoxId = 'checkbox' + i;
    document.getElementById('checkbox-container').innerHTML = `<input type="checkbox" id="${checkBoxId}" onclick="handleCheckBoxClick(this)"></input>`;
}

//function to handle checkbox click you would probably want to make it check if 
//the checkbox is already checked if it is set value to unchecked

function handleCheckBoxClick(ev){
    var checkBoxId = ev.id;
    localStorage.setItem(checkBoxId, 'checked')
}

【讨论】：

【解决方案2】：

你可以使用：

设置存储：

localStorage.setItem('checkbox', b.checked);

获取存储空间：

var checkVal=localStorage.getItem('checkbox');

【讨论】：

我将如何加载获取它？
类似setItem，这里要使用localStorage.getItem('checkbox');
它不像我想的那样工作，我附加它，所以我制作了多个复选框而且它无论如何都不起作用，我已经尝试过这样
@Gabriel 也许您可以创建一个对象数组，其中包含可以设置为 localStorage 的所有复选框值，例如 localStorage.setItem("checkboxlist", JSON.stringify(checkboxlist));

【解决方案3】：

你必须做一些工作。 localStoragedoesn't work in a snippet here，因此可以找到示例代码的工作示例@ this JSFiddle

localStorage.setItem("Checkboxes", "{}");
const showCurrentCheckboxStates = () => 
  document.querySelector("pre").textContent = `Checkboxes saved state ${
    JSON.stringify(JSON.parse(localStorage.getItem("Checkboxes")), null, " ")}`;
const saveCheckboxState = (val, id) => {
  localStorage.setItem("Checkboxes", 
      JSON.stringify({
        ...JSON.parse(localStorage.getItem("Checkboxes")),
        [`Checkbox ${id}`]: val })
      );
  showCurrentCheckboxStates();
};
const createCheckbox = id => {
  let cb = document.createElement('input');
  cb.type = 'checkbox';
  cb.dataset.index = id;
  cb.title = `Checkbox ${id}`;
  document.body.appendChild(cb);
  // save the initial state
  saveCheckboxState(0, id);
};

document.addEventListener("click", evt =>
  evt.target.dataset.index && 
    saveCheckboxState(+evt.target.checked, evt.target.dataset.index)
);

for (let i = 1; i < 11; i += 1) {
  createCheckbox(i);
}

【讨论】：

@Gabriel 很抱歉听到这个消息，也许您应该重新检查您使用的代码。我确定 JSFiddle 可以正常工作，我添加了对原始 localStorage 值的报告
看起来令人印象深刻，但我仍然不知道如何在我的函数中使用它，我想保存对 if 语句的检查，否则取消选中并保存。我可以在本地存储上设置它，但它没有加载检查状态。
@Gabriel 我提供的代码是为了给你一些指导。 Stackoverflow 并不是要让人们为您编写代码。
...我没有要求交给我的代码，但我想说的是你的代码没有给我任何指示，而是给我留下了更多的问题。无论如何，谢谢你的时间。