我正在使用上一篇文章中提到的本地存储理念: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>
答案 0 :(得分:1)
尝试使用正确的HTML5 doctype
:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
...
如果您没有包含正确的HTML5文档类型,大多数浏览器会将网页呈现为旧的[X] HTML而不是HTML5,因为specified by W3C(Chrome通常是规则的例外)。
此外,由于您显然正在使用Adobe DreamWeaver,请不要忘记取消选中“包含BOM签名”并在DW的“另存为”菜单中选择“无”作为规范化词典。这样可以防止它在文档的开头添加垃圾位,这也可能会破坏您的<!DOCTYPE html>
必须从浏览器收到的页面HTML数据的第一个字节开始。< / p>
编辑:JSFiddle自动将您的代码添加到有效的HTML5页面,这就是为什么它在那里完美运行的原因。您可以通过右键单击渲染页面的框架并在Firefox中选择This Frame > View Frame Source
(Chrome和IE的类似方法)来检查它。
另请注意,IE&lt; IE不支持localStorage
。 8.如果您需要与旧版本IE的跨浏览器兼容性,请检查MDN page。