'Laravel $_COOKIE is not working in any browser except chrome

I created a dark and light mode in my laravel project and whenever the vue JS toggle is clicked it should create a cookie that saves the value. It works perfectly fine on google chrome but when i tried it on edge and firefox it showed (Undefined array key "isDarkModeOn").

I just want this cookie to be saved to any browser

My toggle Vue component which includes create cookie

<template>
    <div
        class="flex cursor-pointer items-center justify-between"
        @click="store.modeToggle(), modeToggle()"
    >
        <div
            class="flex h-4 w-12 items-center rounded-full bg-gray-300 p-1 duration-300 ease-in-out"
            :class="{ 'bg-green-400': store.toggleActive }"
        >
            <div
                class="h-3 w-3 transform rounded-full bg-white shadow-md duration-300 ease-in-out"
                :class="{ 'translate-x-7': store.toggleActive }"
            ></div>
        </div>
    </div>
</template>

<script>
import { store } from "./store.js";
export default {
    props: ["theme"],
    data() {
        return {
            store,
        };
    },
    mounted() {
        if (this.theme === "false") {
            store.light();
        } else {
            store.dark();
        }
    },
    methods: {
        dark() {
            this.$emit("dark");
        },
        light() {
            this.$emit("light");
        },

        modeToggle() {
            if (
                this.darkMode ||
                document.querySelector("body").classList.contains("dark")
            ) {
                this.light();
            } else {
                this.dark();
            }
            const isDarkModeOn = store.toggleActive;
            createCookie("isDarkModeOn", isDarkModeOn.toString(), 60 * 60 * 24);
        },
    },
};
</script>

<style></style>

my Js file which contains the logic for creating the cookie

function createCookie(name, value, timeInSeconds) {
    var date = new Date();
    date.setTime(date.getTime() + timeInSeconds * 1000);
    var expires = "; expires=" + date.toGMTString();

    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(cname) {
    let name = cname + "=";
    let decodedCookie = decodeURIComponent(document.cookie);
    let ca = decodedCookie.split(";");
    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) == " ") {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

window.onload = function () {
    const isDarkModeOn = getCookie("isDarkModeOn");
    if (isDarkModeOn === "true") document.body.classList.add("dark");
};

and this is how I tell browser to display dark class or hide it according to the cookie if it exists

<body id="app" style="font-family: Open Sans, sans-serif" class="scroll-smooth {{ $_COOKIE[('isDarkModeOn')] === 'true' ? 'dark' : '' }}">

It works on chrome but not on any other browser.

Also when testing in Laravel like this

        @if ($value = $_COOKIE['isDarkModeOn'])
            {{ $value }}
        @else
            'not found'
        @endif

It echos the value not problem so since there is a cookie why any other browser can't identify it

laravelvue.jscookieslaravel-8


Solution 1:[1]

As for your test, you should use something more safe (doesnt trigger an error when absent)

@if (isset($_COOKIE['isDarkModeOn']))
    {{ $_COOKIE['isDarkModeOn'] }}
@else
    'not found'
@endif

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 N69S

Related Questions