Question

我想创建一个带有“记住我”复选框的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>

Answer 1

你可以尝试这个（需要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>

Answer 2

您可以在此处查看完整示例：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和一些从quirksmode获取的cookie函数。

用于选择href用户的cookie复选框

2 个答案: