javascript react-cookie无法设置过期或最大年龄

z4iuyo4d  于 2023-01-29  发布在  Java
关注(0)|答案(5)|浏览(239)

我似乎不能设置一个cookie的有效期与react-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
ct2axkht

ct2axkht1#

看起来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)});
9lowa7mx

9lowa7mx2#

一年后到期的示例

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的更多信息

h7appiyu

h7appiyu3#

有点晚了,但如果有人仍然有这个问题。在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
所以,写一些类似这样的东西。用"theme"代替你的cookie名称。这段代码会给你那个值。

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

无论如何你都会得到一个字符串,所以如果它是一个int或者其他类型的字符串,那么就进行适当的转换,这是我的useState钩子,我的cookie需要是一个int。

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

希望这对那些还被困的人有帮助!
TLDR;
使用maxAge代替expires
使用document.cookie检查状态的初始cookie值。

sczxawaw

sczxawaw4#

好的,对于你们中的一些人来说,这可能是一个简单的解决方案。(包括我自己)我在添加最大年龄30天或2592000秒之前,在.set方法中没有maxAge属性的情况下运行了我的应用程序。当我添加maxAge时:2592000到我的设置cookie方法浏览器说它仍然会在会话结束时过期。我的修复方法是在开发工具-〉应用程序-〉存储-〉清除站点数据中清除应用程序数据,然后重新登录到我的应用程序,cookie被正确地设置为30天后过期。

cookies.set("loggedinUserId", response.data.userID, { path: '/', maxAge: 2592000 });
uidvcgyl

uidvcgyl5#

我一直在想我做错了什么我想我找到了。
首先,一些用户声称.set方法中的maxAge属性是解决方案。好吧,这可以工作,但如果用户重新加载浏览器,cookie将消失,这将是没有意义的。
解决方案是修改expires属性。我这样做了:

import Cookies from "universal-cookie";

const cookies = new Cookies();
const expirationDate = new Date();

// (Just change 7 for the number of days you want to let this cookie exist)
expirationDate.setDate(expirationDate.getDate() + 7);

const cookieExists = cookies.get("myCookie");

if (!cookieExists) {
  cookies.set("myCookie", `ImTheValue`, { path: '/', expires: expirationDate });
}

正如您所看到的,cookieExists使cookie的验证更加容易,如果cookie不存在,它将创建它,如果存在,它不会设置新的过期日期。
这就行了!
我希望这能对任何有和我一样问题的人有用。

相关问题