Laravel $_COOKIE 在除 chrome 以外的任何浏览器中都无法使用

Question

我在我的 laravel 项目中创建了一个深色和浅色模式，每当单击 vue JS 切换时，它应该创建一个保存该值的 cookie。它在 google chrome 上工作得很好，但是当我在 edge 和 firefox 上尝试它时它显示（未定义的数组键“isDarkModeOn”）。

我只想将此 cookie 保存到任何浏览器

我的切换 Vue 组件，其中包括创建 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>

我的 Js 文件，其中包含创建 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");
};

这就是我告诉浏览器显示深色 class 或根据 cookie 隐藏它（如果存在）的方式

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

它适用于 chrome 但不适用于任何其他浏览器。

在 Laravel 中测试时也是如此

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

它回显值不是问题，既然有 cookie，为什么其他浏览器无法识别它

Answer 1

至于你的测试，你应该使用更安全的东西（不存在时不会触发错误）

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

Answer 2

通过在正文前添加以下代码行解决问题

<?php

if (isset($_COOKIE['isDarkModeOn'])) {
    $cookie = $_COOKIE['isDarkModeOn'];
} else {
    $cookie = '';
}

?>

这不是最好的方法，但它确实有效

Laravel $_COOKIE 在除 chrome 以外的任何浏览器中都无法使用

Laravel $_COOKIE is not working in any browser except chrome

cookies

laravel

vue.js

laravel-8