如何为用户选择的输入（复选框）值使用本地存储。需要使用纯javascript（无Jquery）

我有一个类别列表，可以通过HTML中的复选框选择。我的目标是让用户使用复选框选择他们想要的类别，并在返回时保存他们的选择

我见过Jquery解决方案看起来很简单，但为此我不想使用Jquery。我可以为一个会话保留复选框选择，但无法在打开下一个会话时保留选择

<input type="checkbox" class="chbox" value="animals"checked>
<label for="animals">Animals</label><br>

<input type="checkbox" class="chbox" value="city">
<label for="textures">City</label><br>



function checksValue() {
var checkedBoxes = document.getElementsByClassName('chbox');
var result = [];
for ( i = 0; i < 5; i++) {
    if (checkedBoxes[i].checked === true) {
        result += checkedBoxes[i].value + ", "; 
    }
}
localStorage.setItem("checkedBoxes", JSON.stringify(result));

动物

城市

函数checksValue（）{
var checkedboxs=document.getElementsByClassName（'chbox'）；
var结果=[]；
对于（i=0；i<5；i++）{
如果（复选框[i]。选中===true）{
结果+=复选框[i]。值+“，”；
}
}
setItem（“checkedboxs”，JSON.stringify（result））；

这是您需要的

请记住，我使用ES6，因此如果您需要使用旧版本的JS，您应该在旧版本中翻译代码

//使用class.chbox选择所有文档元素
让cboxes=document.querySelectorAll（'.chbox'）；
//负责处理用户点击所选复选框。
让HandleCheckBox事件=函数（e）{
//如果选中该复选框
如果（例如，选中目标）{
//然后将值保存在本地存储器中。
setItem（e.target.value，e.target.checked）；
}否则{
//否则，如果未选中该复选框，请从本地存储中删除该值
localStorage.removietem（e.target.value）；
}
};
//如果找到超过0个复选框
如果（0{
//如果本地存储中存在当前迭代的复选框名称
if（localStorage.getItem（cb.value））{
//添加checked属性，使复选框显示为选中。
cb.setAttribute（'checked'，'checked'）；
}
//将事件侦听器添加到当前迭代的复选框中，并使用HandleCheckBox函数将其绑定。
cb.addEventListener(
"变",，
手电筒
);
}
);
}

动物

城市

---

另外，请记住，我的解决方案非常基本，因为它为localStorage中的每个选中复选框引入了一个新的键。对于每种情况，都有许多实现都可能是正确的。

这里我看到了三个步骤：

加载页面时，从本地存储加载保存的复选框

一个从仓库拿了所有的东西，检查需要检查的东西

为每个保存che check状态的复选框创建事件侦听器

首先，让我们定义我们将保存和检索的数据结构，我认为这可能是一个好的结构：

{
  "animals": true | false,
  "city": true | false,
  ...
}

现在，定义一个helper方法来检索复选框的状态：

const LOCAL_STORAGE_KEY = 'my_checkboxes' // you can use your key here

const loadStatus = () =>
  JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY)) || {}

这里没有什么特别的：解析从本地存储检索到的项，或者如果之前没有保存状态，则返回空对象

为了能够加载，我们需要能够保存：

const saveStatus = checkboxes => () => {
  const status = checkboxes.reduce(
    (map, checkbox) => Object.assign({}, map, { [checkbox.value]: checkbox.checked }),
    {}
  )

  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(status))
}

此方法接受一组复选框并返回一个事件处理程序（用于复选框更改事件）。它基本上将值映射到它们的检查状态

在

窗口中将所有内容链接在一起。onload

事件处理程序应该可以解决您的问题：

window.onload = () => {

  //  retrieve checks from the local storage
  const checks = loadStatus()

  // for each key value pair...
  Object.entries(checks).forEach(
    ([value, isChecked]) => {
      // ...sets the check status
      document.querySelector(`[value="${ value }"]`).checked = isChecked
    }
  )

  // add event listener that update the local storage when a checkbox change its status
  const checkboxes = Array.from(document.querySelectorAll('.chbox'))
  checkboxes.forEach(
    checkbox => checkbox.addEventListener('change', saveStatus(checkboxes))
  )

}

我知道有些部分可能看起来很难，我很乐意帮忙以防万一

假设这些复选框位于

标记中：

第一阶段

• 获取：

  var main=document.forms[0]；

• 下一步和：

  Array.from（main.elements）

• 然后运行数组并：

  返回chk.checked？1:0；

• map（）

• 在一个键下（例如，

  chx

  ）：

  localStorage.setItem（'chx'，JSON.stringify（values））；

---

第二阶段

• 创建：

  ！（函数（）{{…}）（

• 从

  localStorage

  保存的字符串，在其键和下：

  var values=JSON.parse（localStorage.getItem（'chx'））| |[]；

• 在数组中找到的与当前索引相对应的每个

  1

  上运行数组：

  m.elements[idx].setAttribute（'checked'，true）；

---

演示 注意：以下演示将不允许

lobalStorage

工作，要查看功能演示，请转到此处。

var main=document.forms[0]；
！（功能（m）{
var values=JSON.parse（localStorage.getItem（'chx'））| |[]；
forEach（函数（val，idx）{
如果（val==1）{
m、 元素[idx].setAttribute（'checked'，true）；
}
});
})（主要）；
main.addEventListener（'change'，saveChx）；
函数saveChx（e）{
var chxArray=Array.from（main.elements）；
var values=chxArray.map（函数（chk）{
返回已检查的chk？1:0；
});
console.log（值）；
返回localStorage.setItem（'chx'，JSON.stringify（值））；
}

从本地存储中获取

复选框

项后，您是否有尝试设置复选框值的代码，或者您是在那里卡住的？

结果

以数组开始，然后变成字符串。您应该

推送它，而不是像字符串一样追加。被否决的代码可以解释问题原因？这段代码正常工作，所以我不明白为什么我会被否决。这正是我所需要的！谢谢你的帮助。学习你的解决方案真的很酷。太好了，我很高兴我能提供帮助。请你在你的Plunker中解释一下为什么使用函数（m）？我不明白为什么函数有！在它之前，为什么函数本身在括号中？它看起来很疯狂，但如果你只想在被读取后立即运行一次函数，它是非常有效的。请阅读以下内容