2011-08-25 6 views
0

У меня есть следующий код, который отлично работает. Это позволяет пользователю «любить» или «не нравится» каждый пост с помощью переключателей. Флажки - это переключатели, которые позволяют пользователю показывать/скрывать все понравившиеся или нелюбимые сообщения.выбор радиокнопки

Проблема в том, что мне нужна страница, чтобы помнить о выборе переключателя, когда пользователь уходит и возвращается. Это потребует куки? Если да, то как это реализовать?

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Unhide on checkboxes/radio buttons</title> 
    <link rel="stylesheet" type="text/css" href="_styles.css" media="screen" /> 
    <script type="text/javascript"> 

function radioGroupValue(groupObj) 
{ 
    //Check if there is only one option (i.e. not an array) 
    if (!groupObj.length) 
    { 
     return (groupObj.checked) ? groupObj.value : false; 
    } 

    //Multiple options, iterate through each option 
    for (var i=0; i<groupObj.length; i++) 
    { 
     if (groupObj[i].checked) 
     { 
      return groupObj[i].value; 
     } 
    } 

    //No option was selected 
    return false; 
} 


function toggleLayer(formObj) 
{ 
    var showLikes = document.getElementById('show_likes').checked; 
    var showDislikes = document.getElementById('show_dislikes').checked; 

    var postIndex = 1; 
    while(document.getElementById('post_'+postIndex)) 
    { 
     var liked = radioGroupValue(formObj.elements['like_'+postIndex]) 
     var display = ((!showLikes && liked==='1') || (!showDislikes && liked==='0')) ? 'none' : ''; 
     document.getElementById('post_'+postIndex).style.display = display; 
     postIndex++; 
    } 
} 
</script> 
</head> 
<body> 

<form action="" method="post"> 
    <fieldset> 
     <legend>Unhide Layer Form</legend> 
     <ul> 
      <p><input id="show_likes" name="show_likes" type="checkbox" value="1" checked="checked" onclick="toggleLayer(this.form);" /><label for="b1">Show Likes:</label> </p> 
      <p><input id="show_dislikes" name="show_dislikes" type="checkbox" value="1" checked="checked" onclick="toggleLayer(this.form);" /><label for="b1">Show Disikes:</label> </p> 
     </ul> 

    <label>Email:</label> 

     <input type="email" /> 
    </fieldset> 
<br><br> 

    <fieldset> 
     <legend>Posts</legend> 

<div id="post_1" class="post"> 
    <b>Post #1</b><br> 
    Content of post #1<br> 
    <p><input type="radio" name="like_1" value="1"><label for="like1a">Like</label></p> <p><input type="radio" name="like_1" value="0" onclick="toggleLayer(this.form);"><label for="like1b"> Dislike</label></p> 
</div> 
<div id="post_2" class="post"> 
    <b>Post #2</b><br> 
    Content of post #2<br> 
    <p><input type="radio" name="like_2" value="1"><label for="like2a">Like</label></p> <p><input type="radio" name="like_2" value="0" onclick="toggleLayer(this.form);"><label for="like2b"> Dislike</label></p> 
</div> 
<div id="post_3" class="post"> 
    <b>Post #3</b><br> 
    Content of post #3<br> 
    <p><input type="radio" name="like_3" value="1"><label for="like3a">Like</label></p> <p><input type="radio" name="like_3" value="0" onclick="toggleLayer(this.form);"><label for="like3b"> Dislike</label></p> 
</div> 
<div id="post_4" class="post"> 
    <b>Post #4</b><br> 
    Content of post #4<br> 
    <p><input type="radio" name="like_4" value="1"><label for="like4a">Like</label></p> <p><input type="radio" name="like_4" value="0" onclick="toggleLayer(this.form);"><label for="like4b"> Dislike</label></p> 
</div> 
<div id="post_5" class="post"> 
    <b>Post #5</b><br> 
    Content of post #5<br> 
    <p><input type="radio" name="like_5" value="1"><label for="like5a">Like</label></p> <p><input type="radio" name="like_5" value="0" onclick="toggleLayer(this.form);"><label for="like5b"> Dislike</label></p> 
</div> 
<div id="post_6" class="post"> 
    <b>Post #6</b><br> 
    Content of post #6<br> 
    <p><input type="radio" name="like_6" value="1"><label for="like6a">Like</label></p> <p><input type="radio" name="like_6" value="0" onclick="toggleLayer(this.form);"><label for="like6b"> Dislike</label></p> 
</div> 
<div id="post_7" class="post"> 
    <b>Post #7</b><br> 
    Content of post #7<br> 
    <p><input type="radio" name="like_7" value="1"><label for="like7a">Like</label></p> <p><input type="radio" name="like_7" value="0" onclick="toggleLayer(this.form);"><label for="like7b"> Dislike</label></p> 
</div> 
</form> 

Любые указатели?

+0

Насколько важны ваши данные? Как долго это нужно для сохранения? Если ваше приложение выйдет из строя и потеряет данные, это будет проблемой? Является ли ваше приложение удобным для пользователя не что-то действительно важное? –

+0

это довольно важно для пользователя. Информация не должна быть потеряна ни при каких обстоятельствах. – Sweepster

+0

Не используйте файлы cookie в этом случае; пользователи очищают свои истории, переходят в разные браузеры и другие вещи, чтобы назвать лишь несколько причин, по которым файлы cookie не подходят для хранения важных данных. – Bojangles

ответ

0

Если вы хотите, чтобы другие видели понравившиеся (как в графе) взгляды на использование AJAX для отправки данных в базу данных хранения где-нибудь. Это могло быть загружено страницей. Если вы заинтересованы только в сохранении индивидуальных вариантов пользователей, я бы по-прежнему рекомендовал AJAX, но вместо сохранения счетчика сохраните ответ «да/нет» для каждого пользователя и разместите его в таблице в базе данных. Чтобы сэкономить место, было бы лучше, возможно, сохранить только ответы «да» и предположить, что остальные будут «нет».

0

Вместо печенья лучшим подходом было бы реализовать это как решение для базы данных. Куки-файлы можно удалить, и, таким образом, это станет непоследовательным решением. Если вы хотите, чтобы он сохранял этот выбор до тех пор, пока пользователь активен в вашей системе, затем сохраните пользовательский выбор в базе данных и реализуйте свою логику визуализации вокруг своего сохранения, нравится & не нравится.

+0

База данных - лучший подход? Это похоже на то, что космический челнок лучше, чем на городском автобусе. Для этой простой проблемы база данных будет TOTAL overkill. Печенье было бы хорошо. Местное хранилище будет лучше. –

+0

@Evik - Значит, вы говорите, что я делаю 100 нездоров в моем офисе, а затем выхожу из дома, я увижу все мои неприязни, хотя я сказал, что мне это не нравится. Similary, я диск, немного 100 вещей, а затем я очищаю свой кеш браузера (не уверен, что произойдет с localstorage, но куки исчезли наверняка), и вуаля ... мои неприязни вернулись ... это очень крутой пользовательский опыт! Не так ли? Попробуйте. :) – legendofawesomeness

+0

Это зависит от приложения. Если это тип приложения, которое будет использоваться из одного места или нерегулярно или имеет несущественные данные, то файлы cookie гораздо более уместны. Я не думаю, что в этом вопросе четко излагаются все, что требует базы данных. Конечно, я мог ошибаться. Кажется очевидным, хотя парень, задающий вопрос, ищет краткосрочную, постоянную сохранность данных низкого уровня, а не долгосрочное хранение данных. И большинство людей не имеют доступа к базам данных. –

6

Вы можете использовать localstorage:

$(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}) 
     ); 
    }); 
});​ 

localstorage поддерживается во всех современных браузерах, включая IE8.

Для более старых версий IE вы можете add support easily (перед вышеуказанным скриптом).

Адрес the fiddle. Играйте с помощью переключателей, закройте окно, затем снова откройте его (или просто обновите). Вы увидите, что они сохраняют свое состояние.

+0

Я пробовал использовать этот код, но он не работает ... при обновлении страницы все кнопки сбрасываются. – Sweepster

+0

@ Джонатан: В каком браузере (и в какой версии) вы его тестировали? –

+0

chrome + firefox – Sweepster

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