下拉菜单以记住选择和重定向用户 [英] Drop down menu to remember selection and redirect user

问题描述

我正在制作一个带有下拉菜单的登陆页面，它将用户重定向到一个新目录.

I am making a landing page with a drop down menu which will redirect users to a new directory.

http://steerbox.com/countryselect/

那部分正在工作，现在我需要添加代码来在选择国家/地区时设置 cookie，以便下次用户访问登录页面时，他们将自动重定向到该国家/地区的目录，而无需从再次下拉菜单.

That part is working and now I need to add code to set a cookie when the country is selected, so that the next time the user visits the landing page they will automatically get redirected to that country's directory without having to select from the drop down menu again.

我发现 jquery 和 javascript 会在选择下拉菜单时设置 cookie，但我似乎无法让下拉菜单既设置 cookie 又重定向用户.以下是我目前用于下拉和重定向的脚本:

I have found jquery and javascript which will set the cookie on selection of the drop down, but I can't seem to get the drop down to both set the cookie and still redirect the user. Following is the script that I am currently using for the drop down and redirect:

<Script language="JavaScript">
function goto(form) { var index=form.select.selectedIndex
if (form.select.options[index].value != "0") {
location=form.select.options[index].value;}}
</SCRIPT>
<FORM NAME="form1">
<SELECT NAME="select" ONCHANGE="goto(this.form)" SIZE="1">
<OPTION VALUE="">Select Country
<OPTION VALUE="chile">Chile
<OPTION VALUE="colombia">Colombia
<OPTION VALUE="bolivia">Bolivia
</select>
</FORM>

谢谢！院长

推荐答案

我同意 yckart 的评论 并建议使用 localStorage.

I agree with yckart's comment and suggest using localStorage.

支持非常好(此处显示)，除非您需要支持 IE7 或更低你应该没事.

The support is pretty good (shown here) and unless you need to support IE7 or less you should be ok.

您可以像这样设置和检索数据:

You can set and retrive data like this:

localStorage.varName = 'bling';
var myVal = localStorage.varName;
// or:
localStorage['a little more flexibility'] = 'bling';

要使用它，您可以执行以下操作:

To use this, you could do the following:

<script type="text/javascript">
    if (localStorage && localStorage.country) {
        location = localStorage.country;    
    }

    function formChanged(form) {
        var val = form.options[form.selectedIndex].value;
        if (val !== 'non-value') {
          if (localStorage) {
            localStorage.country = val;
          }
          location = val;
        }
    }
</script>

<FORM NAME="form1">
  <select onchange="formChanged(this);" NAME="country" SIZE="1">
    <OPTION VALUE="non-value">Select Country
    <OPTION VALUE="chile">Chile
    <OPTION VALUE="colombia">Colombia
    <OPTION VALUE="bolivia">Bolivia
  </select>
</FORM>

http://jsfiddle.net/K4Jkc/

一种更保守的方法是在执行重定向之前将 localStorage 中存储的值(如果有的话)与选择列表中的选项进行比较，如 jsFiddle 所示:

An approach that would be a little more conservative would be to compare the value stored in localStorage (if there is one) to options in the select-list before doing the redirect, as shown in this jsFiddle:

http://jsfiddle.net/K4Jkc/1/

这篇关于下拉菜单以记住选择和重定向用户的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！