从jQuery设置cookie和从php读取cookie的正确方法

Question

我尝试读取通过jQuery.设置的cookie值，但是在第一次页面加载时没有读取。但是我看到它已经由jquery设置，并且可以从jQuery读取相同的值。

当尝试从PHP读取cookie值时，它不会在第一次呈现页面时显示该值。但是再次刷新页面，这是从php给出的值。(我需要刷新页面2次才能得到正确的值)

我使用head标记和onload方法来放置setCookie()函数。结果是一样的。

我使用这 jQuery库编写cookie。

这是我用来读和写cookie的代码。

<?php
    if (!isset($_SESSION)) {
        session_start();
    }
    ?>
    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style>
                body{
                    background: #666666;
                }
            </style>
            <script src="js/jquery.min.js" type="text/javascript"></script>
            <script src="js/jquery.cookie.js" type="text/javascript">/script>
            <script>
                setCookie();
                function setCookie() {
                    console.log('on Load');
                    var data_spl = $(location).attr('href').split('#?camlist=')[1];
                    if (data_spl != undefined) {
                        var len = data_spl.split(',').length;
                        $.cookie("len", len);
                        console.log($.cookie("len"));
                    } else {
                        console.log('undefined');
                    }
                }
            </script>
        </head>
        <body>           
            <?php
            for ($i = 0; $i < 100; $i++) {
                echo "<script>console.log('START');</script>";
                echo "<script>console.log('" . $_COOKIE['len'] . "');</script>";
                echo $_COOKIE['len'];
                echo "<script>console.log('END');</script>";
            }
    
            echo "WIDTH & HEIGHT :" . $_SESSION['width_x'] . "-" . $_SESSION['height_y'];
            ?>        
        </body>
    </html>

编辑：

我使用另一个php页面来设置来自java脚本的会话值，并通过jQuery调用该页面，如下面所示。

var len = $(location).attr('href').split('#?data=')[1].split(',').length;
$.post('set_session.php', {params: len}, function (retparams) {
      if (retparams.has) {
         console.log('sucessfuly sent the paramlen!');             
      } else {
         alert("can't read camarauids for grid making");
      }
}, 'retparams');

set_session.php

<?php
if (session_status() == PHP_SESSION_NONE) {
    session_start();
    $_SESSION['urllen'] = 0;
}
if (isset($_POST['params'])) {
    $_SESSION['urllen'] = $_POST['params'];
    echo json_encode(array('retparams' => 'has'));
    echo json_encode(array('datalen' => $_SESSION['urllen']));
} else {
    echo json_encode(array('retparams' => 'error'));
}
?>

然后，我尝试从$_SESSION['urllen']页面读取会话值( index.php )。但它也与上面的.相同(我需要再刷新一次页面，以获得从jQuery post函数设置的正确值)。

Answer 1

正如在注释部分已经提到的，您的Cookie没有出现在第一个页面加载中，因为它还没有设置。(如果您直接在JS中或通过AJAX设置Cookie，则本质上是相同的)

有效获取信息的唯一方法是使用页面重新加载、重定向或通过AJAX请求(取决于哪些内容适合您的需要)。例如，在Cookie设置好之后，您可以重定向JS：

//set your cookie in JS
window.location = location.host; 

更多关于JS重定向的信息可以找到这里或者通过谷歌搜索你的方式。

您还可以在PHP中设置Cookie并使用header()函数重定向：

header('Location: http://www.example.com/');

更多关于PHP重定向的信息可以在这里或Google上找到;)

Answer 2

您可以使用ajax检查这一点。下面是一个简单的例子：

<?php
  if(isset($_GET["checkIfLoggedIn"]) && boolval($_GET["checkIfLoggedIn"]) === true) {
    header("Content-Type: text/json");
    die(json_encode(array("isLoggedIn" => $_COOKIE["isLoggedIn"])));
    exit();
  } else {
    var_dump($_COOKIE);
  }
?>

<html>

  <head>
    <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js.cookie.js"></script>
  </head>

  <body>
    <script type="text/javascript">
      function checkIfLoggedIn() {
        console.log("checking...");

        jQuery.post("?checkIfLoggedIn=1", function(data) {
          if(data.isLoggedIn == true) {
            alert("Logged im.");
          } else {
            alert("NOT logged in!");
          }
        });
      }
    </script>

    <a href="#" onclick="Cookies.set('isLoggedIn', 'true'); checkIfLoggedIn(); return false;">Set logged in to true</a><br/>
    <a href="#" onclick="Cookies.set('isLoggedIn', 'false'); checkIfLoggedIn(); return false;">Set logged in to false</a>

  </body>

</html>