Reactjs 我怎样才能在react中设置cookie？

最初，我使用以下ajax设置cookie

function setCookieAjax(){
  $.ajax({
    url: `${Web_Servlet}/setCookie`,
    contentType: 'application/x-www-form-urlencoded;charset=utf-8',
    headers: { 'Access-Control-Allow-Origin': '*',
               'username': getCookie("username"),
              'session': getCookie("session")
    },
    type: 'GET',
    success: function(response){
      setCookie("username", response.name, 30);
      setCookie("session", response.session, 30);}
  })
}

function setCookie(cname, cvalue, minutes) {
    var d = new Date();
    d.setTime(d.getTime() + (minutes*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

export const getUserName = (component) => {
    setCookieAjax()
 $.ajax({
    url: `${Web_Servlet}/displayHeaderUserName`,
    contentType: 'application/x-www-form-urlencoded;charset=utf-8',
    headers: { 'Access-Control-Allow-Origin': '*',
                'username': getCookie("username"),
                'session': getCookie("session")
            },
    type: 'GET',
    success: function(response){
        component.setState({
        usernameDisplay: response.message
        })
   }.bind(component)
 })
}

现在，我想使用servlet的addingcookie函数设置cookie。但我不知道如何达到我的目的

Cookie loginCookie = new Cookie("user",user);  //setting cookie to expiry in 30 mins
        loginCookie.setMaxAge(30*60);
        loginCookie.setDomain("localhost:4480");
        loginCookie.setPath("/");

response.addCookie(loginCookie);

---

为了延长cookie的时间限制，我应该在react端写些什么来接收cookie的会话时间？

我使用react cookie库在react中设置cookie，它有一些选项，您可以传递这些选项来设置过期时间

看看

在您的案例中使用它的示例：

import cookie from "react-cookie";

setCookie() => {
  let d = new Date();
  d.setTime(d.getTime() + (minutes*60*1000));

  cookie.set("onboarded", true, {path: "/", expires: d});
};

---

似乎先前出现在

react cookie

npm包中的功能已移动到

universal cookie

。现在的相关例子是：

---

一个非常简单的解决方案是使用sfcookies包。 您只需使用npm进行安装，例如： npm安装sfcookies--保存

然后在文件上导入：

import { bake_cookie, read_cookie, delete_cookie } from 'sfcookies';

创建cookie密钥：

const cookie_key = 'namedOFCookie';

在submit函数中，您可以通过如下方式在cookie上保存数据来创建cookie：

bake_cookie(cookie_key, 'test');

要删除它，只需执行以下操作

delete_cookie(cookie_key);

要阅读它：

read_cookie(cookie_key)

---

简单易用。

默认情况下，当您获取您的URL时，React native会设置cookie

查看cookies并确保您可以使用该软件包。 我过去对它很满意

当然，Fetch执行此操作时会执行此操作

credentials: "include",// or "some-origin"

好吧，但是怎么用呢

---安装此软件包后----

要获取cookies，请执行以下操作：

import Cookie from 'react-native-cookie';

Cookie.get('url').then((cookie) => {
   console.log(cookie);
});

Cookie.set('url', 'name of cookies', 'value  of cookies');

要设置Cookie，请执行以下操作：

import Cookie from 'react-native-cookie';

Cookie.get('url').then((cookie) => {
   console.log(cookie);
});

Cookie.set('url', 'name of cookies', 'value  of cookies');

只有这个

但是如果你想要一些，你可以做

1-作为嵌套：

Cookie.set('url', 'name of cookies 1', 'value  of cookies 1')
        .then(() => {
            Cookie.set('url', 'name of cookies 2', 'value  of cookies 2')
            .then(() => {
                ...
            })
        })

2-作为回到一起

Cookie.set('url', 'name of cookies 1', 'value  of cookies 1');
Cookie.set('url', 'name of cookies 2', 'value  of cookies 2');
Cookie.set('url', 'name of cookies 3', 'value  of cookies 3');
....

现在，如果您想确保cookies已设置好，您可以再次获取它以确保

Cookie.get('url').then((cookie) => {
  console.log(cookie);
});

---

例如，使用vanilla js

document.cookie = `referral_key=hello;max-age=604800;domain=example.com`

---

阅读更多信息：

您可以使用默认的javascript cookies设置方法。这台机器运转得很好

createCookieInHour: (cookieName, cookieValue, hourToExpire) => {
    let date = new Date();
    date.setTime(date.getTime()+(hourToExpire*60*60*1000));
    document.cookie = cookieName + " = " + cookieValue + "; expires = " +date.toGMTString();
},

在react方法中调用java脚本函数，如下所示

createCookieInHour('cookieName', 'cookieValue', 5);

您可以使用下面的方式查看cookies

let cookie = document.cookie.split(';');
console.log('cookie : ', cookie);

---

有关更多信息，请参阅下面的文档-

小更新。有一个钩子可供您使用

1） 首先，安装依赖项（仅供注意）

或

2） 我的使用示例：

// SignInComponent.js
import { useCookies } from 'react-cookie'

const SignInComponent = () => {

// ...

const [cookies, setCookie] = useCookies(['access_token', 'refresh_token'])

async function onSubmit(values) {
    const response = await getOauthResponse(values);

    let expires = new Date()
    expires.setTime(expires.getTime() + (response.data.expires_in * 1000))
    setCookie('access_token', response.data.access_token, { path: '/',  expires})
    setCookie('refresh_token', response.data.refresh_token, {path: '/', expires})

    // ...
}

// next goes my sign-in form

}

希望对你有帮助

---

非常感谢您对以上示例的改进建议

react cookie包似乎已更新（破坏）此解决方案中使用的API+1链接，我在下面发布了更新的答案。您好，我已经安装了这个软件包，但在导入时遇到一些错误错误错误：enoint:没有这样的文件或目录，打开'D:\XXX project\user 22 oct\Application1\node\u modules\universal cookie\node\u modules\cookie\index.js'@K.S

npm install universal cookie

？检查消息中的路径。如果它不在那里，则表示您尚未安装它。此软件包有一些问题。只要没有重新加载页面，您就可以访问Cookie。重新加载后，您将得到未定义的

（可能是因为行
var cookies=new cookies（）
，我不知道）。太累了。我花了一天时间研究这个问题，但还没有答案。我要更改我的cookie包。我尝试了
react cookie
，
universal cookie
，在与
未定义的
cookie的结果斗争了一天之后。从这些包中获取（“cookie_name”）
，我终于找到了这个解决方案，包
sfcookies
对我有效。非常感谢你！你救了我！
// SignInComponent.js
import { useCookies } from 'react-cookie'

const SignInComponent = () => {

// ...

const [cookies, setCookie] = useCookies(['access_token', 'refresh_token'])

async function onSubmit(values) {
    const response = await getOauthResponse(values);

    let expires = new Date()
    expires.setTime(expires.getTime() + (response.data.expires_in * 1000))
    setCookie('access_token', response.data.access_token, { path: '/',  expires})
    setCookie('refresh_token', response.data.refresh_token, {path: '/', expires})

    // ...
}

// next goes my sign-in form

}