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

Question

我有这个功能：

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 上复选框的状态，最好的方法是什么？

Answer 1

您可以使用 ：

设置存储：

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

获取存储：

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

Answer 2

因此，如果您要附加多个复选框，并且可能想分别设置它们的所有数据，则您将需要为每个复选框设置不同的 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')
}

Answer 3

你将不得不做一些工作。 localStorage 在此处的片段中不起作用，因此可以在@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);
}