使用Cookie显示/隐藏div

Question

I'm trying to show and hide a div using cookies. I'm using the jQuery cookie plugin. While doing this the div I want to hide does not hide, it stays visible.

As you can see in the code I'm setting a cookie with a button in the div with the id eerst . After this the page needs to be reloaded and the eerst div needs to be hidden and then the div with the id choicea needs to be shown. I already tried different methods doing this, but it hasn't been working for me yet.

<div id="eerst" class="container">
  <div class="row center">
    <h5 class="header col s12 light">Aflevewring 1</h5>
    <video width="400" controls>
      <source src="video\ryan.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
  </div>
  <div class="row center">
    <form id="Test" action='' method='post'>
      <a type="submit" href="." name="On" onClick="SetCookie('choice1','choicea','1' )" class="waves-effect waves-light btn-large red darken-4">choice 1</a>
      <a type='submit' name="Off" class="waves-effect waves-light btn-large red darken-4">choice 2</a>
    </form>
  </div>
</div>
<div id="choicea" class="container">
  <div class="row center">
    <h5 class="header col s12 light">Aflevewring 1</h5>
    <video width="400" controls>
      <source src="video\some.mp4" type="video/mp4">
      Your browser does not support HTML5 video.
    </video>
  </div>
  <div class="row center">
    <form id="Test" action='' method='post'>
      <a type="submit" href="." name="On" onClick="SetCookie('choice2','choice2','1' )" class="waves-effect waves-light btn-large red darken-4">choice 1</a>
      <a type='submit' name="Off" class="waves-effect waves-light btn-large red darken-4">choice 2</a>
    </form>
  </div>
</div>

function SetCookie(c_name, value, expiredays) {
  var exdate = new Date();
  exdate.setDate(exdate.getDate() + expiredays);
  document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
}

$(document).ready(function() {
  if ($.cookie('choice1') == "choicea") {
    $("#choicea").show();
    $("#eerst").hide();
  } else {
    $("#choicea").hide();
  }
});

Answer 1

store the variable in cookie and get the cookie value, check for the string correctness and show/hide the div. As show in the code below

var login_cookie = [];

    login_cookie.push(your_variable);

    var data_in_cookie = JSON.stringify(login_cookie);

    setCookie("cookie_name", data_in_cookie, 1);

    function SetCookie(c_name, value, expiredays) {
      var exdate = new Date();
      exdate.setDate(exdate.getDate() + expiredays);
      document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString())
    }

    function getCookie(cname) {
        var name = cname + "=";

        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');

        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }

    $(document).ready(function() {
        var cookie_string = JSON.parse(getCookie("cookie_name"));
        var check_cookie_value = cookie_string[0];
      if (check_cookie_value == "choicea") {
        $("#choicea").show();
        $("#eerst").hide();
      } else {
        $("#choicea").hide();
      }
    });