使用 js 从引导模式获取 cookie 的值答案

【问题标题】：get value for a cookie from a bootrap modal with js使用 js 从引导模式获取 cookie 的值
【发布时间】：2018-07-01 11:57:27
【问题描述】：

我正在尝试创建一个具有 2 个选项的模式：是或否。当用户选择否时，我将创建一个条件，如果value=no 然后不显示模式。

问题是我无法完成它。如果答案是肯定的，我可以操纵信息，我需要显示一个询问问题的模式，让用户回答并以此为基础，每 15 天做一些事情。

我的代码目前无法正常工作

<script>
    function setCookie(cname, cvalue, exdays) {
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
    }

    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 "";
    }

    function checkCookie() {

        $('#hewant').on('click', function() {
            var valyes = $(this).text();
            console.log(valyes);
        });

        $('#hedont').on('click', function() {
            var valno = $(this).text();
            console.log(valno);
        });
        var user = getCookie("username");

        if (user != "") {
            alert("Welcome again " + user);
        } else {
            $("#myModalcashout").modal();
            user = "testing me";
            if (user != "" && user != null) {
                setCookie("username", user, 15);
            }
        }
    }
</script>

<body onload="checkCookie()">

    <div class="modal fade" id="myModalcashout">
        <div class="modal-dialog">
            <!-- for modal to active manually->
         <!-- Modal content-->
            <div class="modal-content">

                <div class="modal-body">

                    <p style="text-align:center">test</p>
                    <p style="text-align:center">question</p>
                    <p style="text-align:center">for u</p>
                    <div id="hewant" value="yes"> yes i am </div>
                    <div id="hedont" value="no"> no i dont</div>
                </div>

            </div>

        </div>
    </div>
</body>

【问题讨论】：

“我的代码目前不能正常工作”你需要更具体。究竟是什么不工作？
2 个问题，1 我无法获得模态答案以成为 cookie 值，2 获取 div 值的脚本，仅在 onlick 函数中有效，我需要变量作为cookie 值，.. 意思是如果用户点击是，我就是，那么这将成为 cookie 值，或者如果他点击否，我也不会成为 cookie 值
为什么不在 onclick 中调用 setCookie 函数？
因为我不知道怎么做，我只是在学习 cookie

标签： javascript jquery twitter-bootstrap cookies

【解决方案1】：

我为你重构了你的代码。对于初学者来说，两个按钮只需要 1 个侦听器，可以在模式中的按钮上使用 class 分配（我将其从 div 更改为 button 标签。

注意：关于 cookie 操作，“运行此代码 sn-p”在此沙盒环境中不起作用，因此您必须自己进行测试。

现在有一个 showModal() 函数，您将在加载时调用该函数，该函数负责显示您的模态并将点击侦听器附加到模态上的两个按钮。

当用户在模态框上单击是或否时，我们会得到他们的答案并将其传递给 checkCookie() 函数，它会按照您的要求进行操作。

我用经过测试和工作的函数替换了你的创建和设置 cookie 函数（还添加了 eraseCookie()），对所有 3 个函数都有很好的解释 Here

showModal();

function showModal() {
  // only show modal if cookie for the user is null
  var user = readCookie("username");
  if (user != null) {
    alert("Welcome again " + user);
  } 
  else {
    user = "testing me";
    $("#myModalcashout").modal();

    // add listener on buttons
    $('.modalButton').on('click', function() {
      $('#myModalcashout').modal().hide();
      var answer = $(this).val();
      console.log(answer);
      
      // create a cookie with the users answer to the modal
      createCookie("username", answer, 15);
    });
  }
}

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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>


<div class="modal fade" id="myModalcashout">
  <div class="modal-dialog">
    <!-- for modal to active manually->
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-body">
        <p style="text-align:center">test</p>
        <p style="text-align:center">question</p>
        <p style="text-align:center">for u</p>
        <button class="modalButton" value="yes"> yes i am </button>
        <button class="modalButton" value="no"> no i dont</button>
      </div>
    </div>
  </div>
</div>

【讨论】：

我非常感谢您的回答，我测试了它，但没有按照我需要的方式工作，或者我不知道如何使用它。我只需要这个，当模态弹出它作为问题时，现在是或否，应该作为cookie存储15天，所以如果我选择否，当我刷新页面模态不应该显示时，我设置了一个控制台.log 但无论何时刷新页面，我都会返回相同的模式，甚至在我选择选项后，模式会不断弹出并且答案（是或否是擦除）我需要保留此答案
现在弹出它的窗口我不再需要了，当我选择并回答（是或否）时，窗口会弹出一条测试我的消息，我需要存储是的答案，有点像 resting me 消息是如何存储的，但是我需要在 pop 上保存它并将它变成一个变量来告诉模态如何处理这个变量，如果答案是重定向例如如果答案是否定的，不要重定向，因为模态灵魂每 15 天仅弹出一次
好的，我更新了我的示例，仅在“用户名”cookie 没有 cookie 时才显示模式。如果您不理解代码，请尝试就您不理解的特定部分提出问题
// 如果用户对模态框说“是”，则创建一个 cookie。 if(valyes === "yes"){ createCookie("username", user, 15);即使是否，我也总是需要答案，实际上我需要 cookie 值作为答案是是或否，这意味着当我刷新页面时，cookie 值是是/否，一旦我有了这个，那么当页面再次加载 cookie 值必须是一个变量，所以如果 valyes ==yes 创建 cookie 这样或者如果 valyes == 创建 cookie 这样，因为我需要对其进行操作，
使用代码我得到了这个错误：recursion readCookie showModal 太多