1

我正在使用上一篇文章中提到的 localstorage 想法： 记住单选按钮选择

他们的 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>
4

1 回答 1

1

尝试使用适当的 HTML5 doctype：

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

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

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

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

另请注意，localStorageIE < 8 不支持。如果您需要与旧版本 IE 的跨浏览器兼容性，请查看MDN 页面。

于 2012-06-22T02:27:48.230 回答