Javascript 如何自定义在页面刷新后保持选中状态的复选框

我正在尝试创建一个复选框列表，即使在我以前使用的一些JS的帮助下刷新后，它仍然保持选中状态。但当我现在检查的时候，似乎我仍然需要调整一些东西来满足我的需要

我现在主要关心的是如何自定义下面的代码以

No.1如何以列表格式列出以下项目，并保留复选框，但删除项目符号？例如：

复选框1

复选框2

复选框3

复选框4

（但不是每个项目之间的这种间距，更像是Ctrl或Shift+Enter的间距）

第2条如何添加文本链接？例如：

我知道这是一个简单的任务，虽然因为我不是很好，我无法想出如何调整自己的。我尝试过（可能不够努力），但失败了，所以我最终寻求帮助来找出这段代码。因此，非常感谢任何可能在这里帮助我的人

一年过去了
这演示了如何在页面刷新之间保存复选框的状态。单击下面的复选框，然后刷新页面以查看它们的响应方式

该解决方案使用一个类save cb state来表示必须持久化哪些复选框


复选框1
复选框2
复选框3
复选框4

//通过在匿名函数中封装代码来避免范围问题
（功能（）{
//变量来存储当前状态
var cbstate；
//绑定到onload事件
addEventListener（'load'，function（））{
//从localstorage获取当前状态
//状态存储为JSON字符串
cbstate=JSON.parse（localStorage['cbstate']| |'{}'）；
//循环状态数组并检查还原
//匹配元素的状态
用于（cbstate中的var i）{
var el=document.querySelector（'input[name=“”+i+”）；
如果（el）el.checked=true；
}
//获取要监视其状态的所有复选框
var cb=document.getElementsByClassName（'save-cb-state'）；
//循环浏览结果并。。。
对于（变量i=0；i
这可能是使用
localStorage
持久化状态的问题

这：

cbstate = JSON.parse(localStorage['CBState'] || '{}');
...
localStorage.CBState = JSON.stringify(cbstate);

应该是这样的：

cbstate = JSON.parse(localStorage.getItem('CBState')) || {}
...
localStorage.setItem('CBState', JSON.stringify(cbstate))

CSS应该是这样的：

.list-group {
  list-style-type: none; 
  padding-left: 0;
}

<li class="list-group-item"><input type="checkbox" class="save-cb-state" name="mycheckbox" value="yes">
  <a href="https://example.com">Checkbox 1</a>
</li>
<li class="list-group-item"><input type="checkbox" class="save-cb-state" name="mycheckbox2" value="yes">
  <a href="https://example.com">Checkbox 2</a>
</li>
<li class="list-group-item"><input type="checkbox" class="save-cb-state" name="mycheckbox3" value="yes"
  <a href="https://example.com">Checkbox 3</a>
</li>
<li class="list-group-item"><input type="checkbox" class="save-cb-state" name="mycheckbox4" value="yes">
  <a href="https://example.com">Checkbox 4</a>
</li>

HTML应该是这样的：

.list-group {
  list-style-type: none; 
  padding-left: 0;
}

<li class="list-group-item"><input type="checkbox" class="save-cb-state" name="mycheckbox" value="yes">
  <a href="https://example.com">Checkbox 1</a>
</li>
<li class="list-group-item"><input type="checkbox" class="save-cb-state" name="mycheckbox2" value="yes">
  <a href="https://example.com">Checkbox 2</a>
</li>
<li class="list-group-item"><input type="checkbox" class="save-cb-state" name="mycheckbox3" value="yes"
  <a href="https://example.com">Checkbox 3</a>
</li>
<li class="list-group-item"><input type="checkbox" class="save-cb-state" name="mycheckbox4" value="yes">
  <a href="https://example.com">Checkbox 4</a>
</li>





是的，您可以使用JS，但cookie可能会更简单，但不是100%永久性的（例如cookies已删除）。您认为我如何向其添加链接是什么意思？您好，很抱歉，我已经更新了我的问题您好，我非常感谢您的帮助，但我不理解这些代码。我已经用上面提供的代码更新了代码。但我想问一下，这会带来什么变化？localStorage API需要getItem/setItem来更改其属性：list style属性要求list style type为“none”，并且删除了左侧的填充：感谢您@Miaplacidus提供的所有帮助。但我可以再问一件事吗。首先，我想说的是，我对编码非常陌生，对其他有用的工具知之甚少。所以，我真正计划做的事情是这样的：我想在我的blogspot上复制我的虔诚，但似乎手动完成这一切是相当乏味的，因此我想问是否有更好的方法？就像一个自动功能，我可以直接输入文本，然后它会转换成带有链接的复选框？也许如果你使用的是内容管理系统，但这对初学者来说可能太复杂了。我不确定。如果不是CMS，你只需要自己编写。您可以尝试使用类似Atom的代码编辑器，使编写代码的速度稍微加快，并且更易于阅读。