CODEWITHSUNDEEP
javascriptphpjquerycookies
Alexis Bell
Alexis Bell

Reputation: 151

Reading a cookie with jquery that was set by PHP

I'm trying to set a cookie in PHP, and then have my JavaScript/jQuery read it. As I've been trying to research the issue I've seen some people talk about server side vs. client side cookies, and other people saying cookies are just cookies and there's no difference. What I do know is that PHP sees the cookies, and JavaScript doesn't.

Here's a simplified version of the PHP file that builds the page and sets the cookies.

<!DOCTYPE html>
<?php 
    setcookie("card", "", time()+900, '/');
?>
<html>
<body>
       <?php 
            $card = "a string I want in my cookie";
            $_COOKIE['card'] = $card;

            foreach($_COOKIE as $c => $c_value)
            {
                echo "Cookie named " . $c . " has value " . $c_value . "<br/>";
            }
        ?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.cookie.min.js"></script>
    <script type = "text/javascript" src = "script.js"></script>
</body>
</html>

This will correctly show the name and value of the cookie on my page. So I know I'm setting something.

But when my JavaScript runs, I don't seem to have any cookies. I tried a couple different ways to get to the value of either all cookies, or just a single target part of the cookie:

var all_cookies = document.cookie;
var aCard = $.cookie('card');

all_cookies shows up with a value of "" when I debug, and aCard just stays undefined.

So do I need to set the cookies differently with PHP? Or read them differently with either JavaScript or jQuery?

Upvotes: 2

Views: 1691

Answers (1)

rickdenhaan
rickdenhaan

Reputation: 11328

PHP's setcookie() function sets an HTTP response header that instructs the browser to set the cookie. This is only possible if you haven't sent any output yet. Calling setcookie() after you have already output the <!DOCTYPE means you should be getting a "Cannot modify header information - headers already sent" warning.

To set a cookie and make it available to Javascript, you need to set it at the very beginning of your script before generating any output:

<?php
    $card = "a string I want in my cookie";
    setcookie("card", $card, time()+900, '/');

    // note from the manual (https://php.net/setcookie):
    //     Once the cookies have been set, they can be accessed
    //     on the next page load with the $_COOKIE array.
    //     ^^^^^^^^^^^^^^^^^^^^^
    //
    // so the "card" cookie won't be in $_COOKIE until
    // the next page load. If you want it in there
    // immediately, you need to set it manually:

    $_COOKIE['card'] = $card;
?>
<!DOCTYPE html>
<html>
<body>
       <?php 
            foreach($_COOKIE as $c => $c_value)
            {
                echo "Cookie named " . $c . " has value " . $c_value . "<br/>";
            }
        ?>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/jquery.cookie.min.js"></script>
    <script type = "text/javascript" src = "script.js"></script>
</body>
</html>

Now that you've used setcookie() before generating any output, the cookie is set properly and Javascript should be able to access it from document.cookie without any trouble.

Upvotes: 2

Related Questions