选定href用户的Cookie复选框

cookie checkbox for what href user was chosen

本文关键字：Cookie 复选框 用户 href 选定      更新时间：2023-09-26

我想创建一个带有"remember me"复选框的2按钮脚本，在用户的浏览器上放置一个cookie。
下次他进入该网站时，他将被自动重定向到他第一次选择的链接。
我到处找这样的东西

<div id="container">
    <p>Please Choose Your Preference</p>
    <br/>
    <div class="normal_site"><a href="">Regular Site</a></div>
    <div class="mobile_site"><a href="">Mobile Site</a></div>
</div>

你可以试试这个(需要jQuery)。http://jsfiddle.net/infernalmaster/c6cmk/8/

<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id="conteiner">
    <p>Please Choose Your Preference</p>
    <br>
    <div class="normal_site "><a class="sitelink" href="http://www.regular.com/">Regular Site</a></div>
    <div class="mobile_site"><a class="sitelink" href="http://www.mobile.de/">Mobile Site</a></div>
    <div class="remember"><input id="remember_me" type="checkbox" checked=""> Remember My Selection<div>
</div>
<script type="text/javascript">
function validate(){
    $(document).on('click', '.sitelink', function(){ // if user click on link
       var site_pref = $(this).attr('href');         
       if($('#remember_me').is(':checked')){        //if checkbox is checked then 
                                                    //  write link url t cookie
          createCookie('site_pref', site_pref, 30);  // for 30 days
       } else {
          eraseCookie('site_pref');                
       }
       return true;
    });

    var site_pref = readCookie('site_pref');  //read cookie
    if(site_pref){                             //if cookie present then
        self.location=(site_pref);      //redirect to path form cookie
    }    
}
validate();
// Taken verbatim from http://www.quirksmode.org/js/cookies.html
function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}
function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}
function eraseCookie(name) {
    createCookie(name,"",-1);
}
</script>

您可以在这里看到完整的示例:http://jsfiddle.net/c6cmk/

代码最重要的部分是:

$('.normal_site').on('click', function() {
    createCookie('site_pref', 'normal', 1);
});
$('.mobile_site').on('click', function() {
    createCookie('site_pref', 'mobile', 1);
});
var pref = readCookie('site_pref');
if (pref) {
    alert(pref);
} else {
    alert('please choose a website!');
}

最初，如果用户没有选择任何东西，它会提示他选择一个链接。在他单击其中一个之后，如果他重新访问页面(尝试重新加载)，他将收到一个警告，显示他之前的选择。注意:cookie只存储1天，您可能想要增加它。

我正在使用jQuery和一些cookie函数取自quirksmode。

相关文章：