react-cookie无法设置expires或maxAge

Question

我似乎不能用react- cookie设置cookie的过期时间...下面是我的设置：

import { Cookies } from 'react-cookie'
const cookies = new Cookies()
import moment from 'moment'

以下尝试已失败：

cookies.set('cookieName', {key: value}, {path: '/', expires: new Date(Date.now()+2592000)})
cookies.set('cookieName', {key: value}, {path: '/', expires: moment().add(30, "days")})
cookies.set('cookieName', {key: value}, {path: '/', maxAge: 2592000})

Chrome继续呈现：

Expires
When the browsing session ends

Answer 1

react-cookie中的Cookies似乎已经被移到了universal-cookie包中。因此，下面的代码应该可以工作：

import Cookies from 'universal-cookie';

const cookies = new Cookies();
cookies.set('cookieName', {key: value}, {path: '/', expires: new Date(Date.now()+2592000)});

Answer 2

一年后到期的示例

import Cookies from 'universal-cookie';

const cookies = new Cookies();
const current = new Date();
const nextYear = new Date();

nextYear.setFullYear(current.getFullYear() + 1);

cookies.set('cookieName', true, {
    path: '/',
    expires: nextYear,
});

您可以在此处查看有关如何使用Date.set https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/setFullYear的详细信息

Answer 3

有点晚了，但如果有人还在这方面有问题的话。在universal-cookie中，尝试使用maxAge选项而不是expires。

下面是我如何让我的应用工作的一小段代码。

cookies.set("theme", 0, {
    path: "/",
    maxAge: 1000000
});

老实说，你最好使用普通的cookie设置。Info Here

无论如何，你将不得不使用document.cookie与你已经设置好的cookie进行交互。下面是我的代码片段。以及useState钩子以供参考。

如此doc所示，document.cookie向您显示了所有cookie输出的列表，如下所示。

cookieOne=1; cookieTwo=poopy; cookieThree=etc

所以，写出像这样的东西。将“主题”替换为您的cookie名称。这段代码将为您提供该值。

const docThemeCookie = document.cookie
  .split("; ")
  .find((row) => row.startsWith("theme"))
  .split("=")[1];

不管发生什么，你都会得到一个字符串，所以如果它是一个int类型或者其他类型的类型，就可以进行适当的转换。这是我的useState钩子，我的cookie需要是一个整数。

const [theme, setTheme] = useState(parseInt(docThemeCookie, 10));

希望这对那些仍然被困住的人有所帮助！

TLDR；

使用maxAge而不是expires。

使用document.cookie检查状态的初始Cookie值。