1

以前の投稿で述べた localstorage のアイデアを使用しています: ラジオ ボタンの選択を記憶する

彼らの jfiddle の例は問題なく動作しますが、同じコード (以下を参照) をローカル ホストの Web ページに組み込むと、ページが更新された後に新しい選択が機能しません。私は最新の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 doctype を含めない場合、ほとんどのブラウザーは HTML5 ではなく古い [X]HTML としてページをレンダリングします(ただし、Chrome は多くの場合、ルールの例外です)。

また、Adobe DreamWeaver を使用しているようですので、「BOM 署名を含める」のチェックを外し、DW の「名前を付けて保存」メニューで正規化辞書として「なし」を選択することを忘れないでください。これにより、ブラウザが受信したページの HTML データの最初のバイトから開始し<!DOCTYPE html>なければならない文書が破損する可能性があるドキュメントの先頭にジャンク ビットが追加されるのを防ぐことができます。

編集: JSFiddle は有効な HTML5 ページにコードを自動的に追加します。そのため、そこで完全に正常に動作します。レンダリングされたページのフレームを右クリックしThis Frame > View Frame Sourceて Firefox を選択すると、確認できます (Chrome と IE の場合と同様の方法)。

localStorageまた、IE < 8 ではサポートされていないことにも注意してください。古いバージョンの IE とのクロスブラウザー互換性が必要な場合は、 MDN ページを確認してください。

于 2012-06-22T02:27:48.230 に答える