页面刷新后如何记住选中的单选按钮答案

【问题标题】：How to remember a selected radio button after page refresh页面刷新后如何记住选中的单选按钮
【发布时间】：2012-06-24 08:20:32
【问题描述】：

我正在使用上一篇文章中提到的本地存储想法：remember radio button selections

他们的 jfiddle 示例工作正常，但是当我将相同的代码（见下文）合并到本地主机上的网页中时，刷新页面后新选择不起作用。我正在引用最新的 jquery 库 - http://code.jquery.com/jquery-latest.js

如有任何建议，我将不胜感激。我确定这是我缺少的一些简单的东西。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

$(function()
{
    $('input[type=radio]').each(function()
    {
        var state = JSON.parse( localStorage.getItem('radio_'  + this.id) );

        if (state) this.checked = state.checked;
    });
});

$(window).bind('unload', function()
{
    $('input[type=radio]').each(function()
    {
        localStorage.setItem(
            'radio_' + this.id, JSON.stringify({checked: this.checked})
        );
    });
});

</script>

</head>

<body>

<form method="post">
<input type="radio" name="foo" id="foo1" />foo1<br />
<input type="radio" name="foo" id="foo2" />foo2<br />
<input type="radio" name="bar" id="bar1" />bar1<br />
<input type="radio" name="bar" id="bar2" />bar2<br />
</form>

</body>

【问题讨论】：

您是否使用与 jfiddle 示例中完全相同的代码？如果您不发布任何代码，那真的很难提供帮助。
您的确切代码是什么？我们无法猜测您做错了什么，我们必须分析您的实际代码。
代码现在添加到初始问题中。干杯。
我认为如果您不添加 HTML5 doctype，HTML5 的 localStorage 将无法在大多数浏览器中运行。

标签： jquery radio-button local-storage

【解决方案1】：

尝试使用适当的 HTML5 doctype:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
...

如果您没有包含正确的 HTML5 文档类型，例如 specified by W3C，大多数浏览器会将页面呈现为较旧的 [X]HTML 而不是 HTML5（不过，Chrome 通常是该规则的例外）。

此外，由于您显然使用的是 Adobe DreamWeaver，请不要忘记取消选中“包含 BOM 签名”并在 DW 的“另存为”菜单中选择“无”作为规范化字典。这将防止它在文档的开头添加垃圾位，这也可能会破坏您的<!DOCTYPE html>，它必须从浏览器接收到的页面 HTML 数据的第一个字节开始。

edit: JSFiddle 会自动将您的代码添加到有效的 HTML5 页面，这就是它在那里工作得非常好的原因。您可以通过右键单击渲染页面的框架并在Firefox中选择This Frame > View Frame Source来检查它（Chrome和IE的类似方法）。

另请注意，IE localStorage。如果您需要与旧版本 IE 的跨浏览器兼容性，请检查MDN page。

【讨论】：

谢谢 - 这是个好建议。不幸的是，更新文档类型并没有解决问题，所以我最终插入了渲染的页面源代码（在框架内），这很好。有趣的是，这段代码看起来与我的初始代码相同。所以javascript里面一定有一个小故障，但我找不到它是什么。再次感谢。
没问题。 =] 很多事情都会触发 Quirks 模式，如果你认为这是你的 JS 的错，你通常可以检查 JS 错误控制台 - Chrome/IE 中的 F12，Firefox 中的 Ctrl+Shift+K（或安装 Firebug 的 F12）。很高兴有帮助。 :)
此外，检索所选单选按钮的 id 的最佳方法是什么？关于localstorage的简明教程似乎不多，这可能是我还没有完全掌握的原因。
取决于您如何存储它。 this.id 如果您要遍历存储的收音机就足够了，如果您需要，我可以仔细查看。
@user1267980 不确定这是否正是您要查找的内容，但我编辑了链接答案的小提琴并添加了一些 cmets：Fiddle。在这个小提琴中，我得到了选中的收音机并提醒它的 id。 =]