在 Javascript Switch 语句上设置 Cookie答案

【问题标题】：Set Cookie On Javascript Switch Statement在 Javascript Switch 语句上设置 Cookie
【发布时间】：2012-11-21 23:45:36
【问题描述】：

我有这个 javascript switch 语句：

function showSideMenu() {
            switch (document.forms["culinaryrequest"].culinarytype.selectedIndex) {
                case 0:
                    document.getElementById('case1').style.display="none";
                    document.getElementById('case2').style.display="none";
                    document.getElementById('case3').style.display="none";
                    document.getElementById('case4').style.display="none";
                    break;
                case 1:
                    document.getElementById('case1').style.display="table-row";
                    document.getElementById('case2').style.display="none";
                    document.getElementById('case3').style.display="none";
                    document.getElementById('case4').style.display="none";
                    break;
                case 2:
                    document.getElementById('case1').style.display="none";
                    document.getElementById('case2').style.display="table-row";
                    document.getElementById('case3').style.display="none";
                    document.getElementById('case4').style.display="none";
                    break;
                case 3:
                    document.getElementById('case1').style.display="none";
                    document.getElementById('case2').style.display="none";
                    document.getElementById('case3').style.display="table-row";
                    document.getElementById('case4').style.display="none";
                    break;
                case 4:
                    document.getElementById('case1').style.display="none";
                    document.getElementById('case2').style.display="none";
                    document.getElementById('case3').style.display="none";
                    document.getElementById('case4').style.display="table";
                    break;
                default:
                    break;
            }
        }

当用户从下拉菜单中选择一个选项时，它会显示由上述 switch 语句控制的某个元素。问题出在刷新时，或者如果用户遇到错误并被带回页面，则该元素再次被隐藏。我想设置一个 cookie 以保持元素显示，但我不确定如何将 cookie 添加到 switch 语句。我可以举个例子吗？谢谢！

【问题讨论】：

标签： javascript cookies switch-statement jquery-cookie

【解决方案1】：

您可以使用框架来完成这项工作。

<html>
    <head>
        <title></title>
        <style type="text/css">
            div.case{
                display: none;
            }
        </style>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js"></script>
        <script type="text/javascript">
            (function($){
                $(document).ready(function(){
                    // Define cookie key
                    var cookiekey = "mycookiekey";

                    // Get cases
                    var cases = $('div.case').hide();

                    // Set handler
                    var handler = $('#culinarytype');

                    // Show case based on cookie
                    handler.val($.cookie(cookiekey));

                    // Define the select function
                    var selectFromHandler = function(){
                        selected = handler.val();

                        // First hide all cases
                        cases.hide();

                        // Show only wanted case
                        if(selected > 0){
                            $(cases.get(selected - 1)).show();
                        }

                        // Set cookie
                        $.cookie(cookiekey, selected, { expires: 7 });
                    }

                    // Based on handler change
                    handler.change(selectFromHandler);

                    // Default
                    selectFromHandler();
                });
            })(jQuery);
        </script>
    </head>
    <body>
        <select id="culinarytype">
            <option value="0"></option>
            <option value="1">Case 1</option>
            <option value="2">Case 2</option>
            <option value="3">Case 3</option>
            <option value="4">Case 4</option>
        </select>

        <div class="case">Case 1</div>
        <div class="case">Case 2</div>
        <div class="case">Case 3</div>
        <div class="case">Case 4</div>
    </body>
</html>

【讨论】：

【解决方案2】：

这可能会有所帮助。前任。设置cookie

function SetCookie(cookieName,cookieValue) {
 var today = new Date();
 var expire = new Date();
 if (nDays==null || nDays==0) nDays=1;
 expire.setTime(today.getTime() + 3600000*24);
 document.cookie = cookieName+"="+escape(cookieValue)
                 + ";expires="+expire.toGMTString();
}

获取 cookie 值

function ReadCookie(cookieName) {
 var theCookie=" "+document.cookie;
 var ind=theCookie.indexOf(" "+cookieName+"=");
 if (ind==-1) ind=theCookie.indexOf(";"+cookieName+"=");
 if (ind==-1 || cookieName=="") return "";
 var ind1=theCookie.indexOf(";",ind+1);
 if (ind1==-1) ind1=theCookie.length; 
 return unescape(theCookie.substring(ind+cookieName.length+2,ind1));
}

每个case里面调用setCookie方法，刷新后获取cookie

【讨论】：

【解决方案3】：

function showSideMenu() {
    var choice = document.forms["culinaryrequest"].culinarytype.selectedIndex;
    for (var x = 1, y = 4; x < y; x++) {
      document.getElementById('case' + x).style.display = (x == choice ? (choice == 4 ? "table" : "table-row") : "none");
    }
    setCookie("MYAWESOMECOOKIE", choice);
}

function getCookie(c_name) {
  if (document.cookie.length > 0) {
    var c_start = document.cookie.indexOf(c_name + "=");
    if (c_start != -1) {
      c_start = c_start + c_name.length + 1 ;
      var c_end = document.cookie.indexOf(";", c_start);
      if (c_end == -1) {
        c_end = document.cookie.length;
      }
      return decodeURIComponent(document.cookie.substring(c_start, c_end));
    }
  }
  return null;
}

function setCookie(c_name, value, expires) {
  if (typeof(expires) === "undefined") {
    expires = 365;
  }
  var expiresDate = new Date();
  expiresDate.setTime(expiresDate.getTime() + (expires * 24 * 3600 * 1000));
  document.cookie = c_name + "=" + encodeURIComponent(value) + ((expires == null) ? "" : "; expires=" + expiresDate.toGMTString());
}

function removeCookie(c_name) {
  if (getCookie(c_name)) {
    document.cookie = c_name + "=" + "; expires=Thu, 01-Jan-70 00:00:01 GMT";
  }
}

【讨论】：

感谢您的帮助。我试过了，刷新后元素仍然消失。并且案例 4 没有显示，我假设是因为它在应该是“table”时添加了“table-row”。
对不起，我认为这是一个错字，我试图简洁。您需要在页面加载时读取 cookie 的值，以便设置元素的显示属性。 Abdul's 提供了一套很好的 setCookie/readCookie 例程，但我也会添加自己的。
嗯，将更新的代码放入其中也不起作用。有什么我需要改变的东西吗？我感谢您的帮助。如果我创建一个小提琴会有帮助吗？
您是否在页面首次加载时检查该值？您需要在页面底部添加一个脚本块来检查 cookie 是否已设置，如果已设置，则更新表格的显示。