首页 > 解决方案 > 在 nextjs 中为多个设备使用 cookie

问题描述

我正在使用 nextjs,我想使用 cookie 在多个设备上共享一些数据。当我在当前设备上的 cookie 中设置数据并在另一台设备上检查时,我发现数据不存在。

在 _app.js 中

import { CookiesProvider } from "react-cookie"

<CookiesProvider>
          <UserProvider>
            <CartProvider>
              <Layout
              >
                <Component {...pageProps} />
              </Layout>
            </CartProvider>
          </UserProvider>
        </CookiesProvider>

在购物车提供者中

import { useCookies } from "react-cookie";


export default function CartProvider({ children }: Props) {
  const [cookies, setCookie, removeCookie] = useCookies([
    "cart_token",
    "token",
  ]);
  useEffect(()=>{
  API.get(`cart/show/${temp_token ? temp_token : ""}`)
              .then((res) => {
                setCookie("cart_token", res.data.data.cart_token, {
                  path: "/",
                  maxAge: 3600 * 24 * 360,
                  sameSite: true,
                });
                })
  },[])
  }
  

但是当我在另一台设备上检查 cookie 时,我在 cookie 中看不到 cart_token

标签: javascriptcookiesnext.jsfrontendreact-cookie

解决方案


要添加到@juliomalves 评论,在您的情况下,您需要将购物车项目存储在后端,然后在新设备中,当同一用户登录时将其取回


推荐阅读