如何使用纯 Javascript 将选中的单选按钮的值存储在本地存储中？

Posted 2023-02-22

【中文标题】如何使用纯 Javascript 将选中的单选按钮的值存储在本地存储中？

【英文标题】：How do you store the value of a checked radio button in local storage using pure Javascript?

【发布时间】：2015-06-27 14:33:11

【问题描述】：

我想将选中的单选按钮存储在本地存储中，以便在重新加载页面时，它会在重新加载时检查最后一个选中的项目。

html：

<h3>Seconds Display:</h3>
<p id="secondsHidingText">Hiding seconds extends battery life</p>
&nbsp&nbsp<input type="radio" name="seconds" value="show" checked="checked">Show&nbsp&nbsp
<input type="radio" name="seconds" value="hide">Hide

这是我的 javascript：

localStorage.setItem('seconds', options.seconds);

（当我点击保存按钮时运行）

和

document.getElementById('seconds').value = localStorage.getItem("seconds");

（在正在加载的文档上运行）

我收到以下错误：Uncaught TypeError: Cannot set property 'value' of null

如何在本地存储中存储和检索选中的单选按钮？如果可能的话，我正在寻找一种纯粹的 JS 方式来实现这一点。

谢谢！

【问题讨论】：

你在页面哪里调用JS？听起来它无法通过 id 找到输入。您有指向实时页面的小提琴或链接吗？

不确定我是如何忽略它的，但没有显示 ID 为 seconds 的元素。

这里是页面链接：barrydoyle18.github.io/remindMeConfig.html 请原谅嘿警报...

是的，就是这样！我不敢相信我也错过了！感谢您发现它:)

没问题。我自己去过那里很多次。

【参考方案1】：

您必须遍历单选按钮，然后设置值。像这样的

var radios = document.getElementsByName("seconds"); // list of radio buttons
var val = localStorage.getItem('seconds'); // local storage value
for(var i=0;i<radios.length;i++)
  if(radios[i].value == val)
      radios[i].checked = true; // marking the required radio as checked
  

我使用 jquery 只是为了方便地设置 localstorage 值。

这是一个demo

【讨论】：

如果它不起作用，请告诉我。有时 jsfiddle 会产生问题。

完美的例子！你能再做一个做饼干吗？我应该如何从那里获取元素？