记住单选按钮选择

我有以下代码，完美的作品。它允许用户使用单选按钮“喜欢”或“不喜欢”每个帖子。复选框是允许用户显示/隐藏所有喜欢或不喜欢的帖子的开关。记住单选按钮选择

的问题是，我需要的页面记住单选按钮，选择当用户离开并返回。这需要cookies吗？如果是这样，我该如何实现它？

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

任何指针？

来源

2011-08-25 Sweepster

您的数据有多重要？需要多久才能坚持下去？如果你的应用程序崩溃并丢失了数据，那会是一个问题吗？您的应用程序对用户来说是否方便并不重要？ –

这对用户来说相当重要。这些信息在任何情况下都不应该丢失。 – Sweepster

在这种情况下，请勿使用Cookie。用户清除他们的历史记录，转移到不同的浏览器和其他东西，但只有几个原因说明为什么Cookie不适合存储重要数据。 – Bojangles

如果你希望别人看到喜欢的（如在计数）考虑使用AJAX将数据发送某处到存储数据库。这是它可以加载页面。如果你只是对存储个人用户的选择感兴趣，我仍然会推荐AJAX，但不是保存计数器，而是为每个用户保存yes/no的答案，并将其发布到数据库的表中。为了节省空间，最好也许只储存肯定的答案，并假设其他答案是否定答案。

来源

2011-08-25 23:42:57 smitec

相反的饼干，更好的方法是实施这是一个数据库解决方案。 Cookie可以被删除，因此这将成为一个不一致的解决方案。如果您希望只要用户在您的系统中处于活动状态，就可以坚持这一选择，然后将用户选择保存在数据库中，然后在他们的保存喜欢&不喜欢的地方执行渲染逻辑。

来源

2011-08-25 23:39:38 legendofawesomeness

数据库是一个更好的方法？这就像说航天飞机比乘坐城市公交车更好。对于这个简单的问题，一个数据库将会是过度杀伤性的。饼干会很好。本地存储会更好。 –

@Evik - 所以你说我在办公室做了100个不喜欢的事情，然后从我家登录，我会看到我所有的不喜欢 - 尽管我说我不喜欢它们。与之相似，我盘状几百的东西，然后清除浏览器缓存（不知道会发生什么样的localStorage，但饼干都不见了肯定），瞧......我不喜欢回来......这是一个相当真棒用户体验！不是吗？试试看。 :) – legendofawesomeness

这取决于应用程序。如果是从一个位置或不规则地使用或具有不重要数据的应用类型，则Cookie更合适。我不认为这个问题清楚地概括了需要数据库的任何事情。当然，我可能是错的。似乎很明显，提出这个问题的人正在寻找短期的，低层次的数据持久性，而不是长期的数据存储。而且，大多数人无法访问数据库。 –

您可以使用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。玩弄单选按钮，关闭窗口，然后重新打开它（或只是刷新）。你会看到他们保持他们的状态。

来源

2011-08-25 23:41:08

我尝试使用此代码，但它不起作用...刷新页面时，所有按钮都重置。 – Sweepster

@Jonathan：你测试过哪个浏览器（以及哪个版本）？ –

chrome + firefox – Sweepster

记住单选按钮选择

回答

相关问题