Как запомнить выбранную радиокнопку после обновления страницы

Я использую идею LocalStorage упоминалось в предыдущем посте: 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>

источник

2012-06-22 user1267980

Вы используете тот же самый код, что и в примере jfiddle? Если вы не публикуете какой-либо код, это очень сложно. –

Каков ваш ТОЧНЫЙ код? Мы не можем догадаться, что вы сделали неправильно, нам нужно проанализировать ваш код ACTUAL. – jfriend00

Код добавлен в начальный вопрос. Приветствия. – user1267980

Попробуйте с doctype надлежащего HTML5 в:

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

Большинство браузеров отображают страницу как старшем [X] HTML вместо HTML5, если не включать надлежащего HTML5 доктайп как specified by W3C (Тем не менее, Chrome часто является исключением из правила).

Кроме того, поскольку вы, по-видимому, используете Adobe DreamWeaver, не забудьте снять флажок «включить подпись BOM» и выбрать «none» в качестве вашего словаря нормализации в меню «Сохранить как» DW. Это предотвратит его добавление младших бит в начале документа, который также может сломать ваш <!DOCTYPE html>, который должен начать с самого первого байта HTML-данных страницы, полученных браузером.

Редактировать: JSFiddle автоматически добавляет ваш код к допустимой странице HTML5, поэтому он отлично работает там. Вы можете проверить его, щелкнув правой кнопкой мыши рамку рендеринговой страницы и выбрав This Frame > View Frame Source в Firefox (аналогичные методы для Chrome и IE).

Также обратите внимание, что localStorage не поддерживается в IE < 8. Проверьте MDN page, если вам нужна кросс-браузерная совместимость со старыми версиями IE.

источник

2012-06-22 02:27:48

Спасибо, это хороший совет. К сожалению, обновление типа документа не помогло устранить проблему, поэтому я включил исходный код страницы (внутри фрейма), и это работает нормально. Смешно, этот код выглядит идентично моему первоначальному коду. Поэтому в javascript должен быть сбой, но я не могу найти, что это такое. Еще раз спасибо. – user1267980

Нет проблем. '=]' Многие вещи могут вызывать режим Quirks, и если вы считаете, что это ваша ошибка JS, вы обычно можете проверить консоль ошибок JS - F12 в Chrome/IE, Ctrl + Shift + K в Firefox (или F12 с установленным Firebug) , Рад помочь. ':)' –

Кроме того, что было бы лучшим методом для получения идентификатора выбранного переключателя? По-видимому, не существует много кратких руководств по localstorage, и, вероятно, поэтому я все еще не понимаю его полностью. – user1267980

Как запомнить выбранную радиокнопку после обновления страницы

ответ

Смежные вопросы