Home/ Questions/Q 8128961
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T08:06:34+00:00

I’m using the localstorage idea mentioned in a previous post: remember radio button selections

  • 0

I’m using the localstorage idea mentioned in a previous post: remember radio button selections

Their jfiddle example works fine, however when I incorporate the same code (see below) into a web page on my local host, the new selection doesn’t work after the page is refreshed. I’m referencing the latest jquery library – http://code.jquery.com/jquery-latest.js

I’d be grateful for any suggestions. I’m sure it’s something simple I’m missing.

<!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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try with a proper HTML5’s doctype:

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

    Most browsers will render the page as older [X]HTML instead of HTML5 if you don’t include the proper HTML5 doctype, as specified by W3C (Chrome is often an exception to the rule, though).

    Also, as you’re apparently using Adobe DreamWeaver, don’t forget to uncheck the “include BOM signature” and select “none” as your normalization dictionary in DW’s Save As menu. This will prevent it from adding junk bits in the start of the document which may also break your <!DOCTYPE html> which must start in the very first byte of the page’s HTML data received by the browser.

    edit: JSFiddle automatically adds your code to a valid HTML5 page, that is why it works perfectly fine there. You can check it by right-clicking the rendered page’s frame and selecting This Frame > View Frame Source in Firefox (similar methods for Chrome and IE).

    Also note that localStorage is not supported in IE < 8. Check the MDN page if you need cross-browser compatibility with older versions of IE.

    • 0