从 jQuery 设置 cookie 并从 php 读取的正确方法答案

【问题标题】：Correct way to set cookie from jQuery and read from php从 jQuery 设置 cookie 并从 php 读取的正确方法
【发布时间】：2022-02-10 17:03:44
【问题描述】：

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

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

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

我使用this 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'));
}
?>

然后我尝试从 index.php 页面读取会话值 ($_SESSION['urllen'])。但这也和上面一样。（我需要再刷新一次页面才能获得从 jQuery post 函数设置的正确值。）

【问题讨论】：

由于客户端和服务器端代码不同，第一次加载页面时没有设置。您在客户端上设置 cookie。在重新加载页面之前，服务器将不会读取该 cookie，因为服务器代码执行 before 客户端代码。由于您构建代码的方式，每次重新加载控制台时，都将始终显示在 previous 页面上设置的 cookie
匹配两个cookie（正面和背面）的最佳选择是通过xhttp请求将您的cookie发送到php。

标签： javascript php jquery cookies

【解决方案1】：

正如评论部分已经提到的，您的 Cookie 没有出现在第一页加载中，因为它尚未设置。（如果你设置 Cookie 直接在 JS 中或通过 AJAX 基本相同）

有效获取信息的唯一方法是通过页面重新加载或重定向或通过 AJAX 请求（取决于您的需求）。例如，您可以在 Cookie 设置后在 JS 中重定向：

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

有关 JS 重定向的更多信息可以在 here 找到，或者您可以通过 Google 搜索。

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

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

更多关于 PHP 重定向的信息可以在here 或谷歌上找到；）

【讨论】：

【解决方案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>

【讨论】：