关于reactjs：如何在react中设置cookie？


How can I set a cookie in react?

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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的添加cookie函数来设置cookie。 但是我不知道如何实现我的目标。

1
2
3
4
5
6
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 npm软件包中存在的功能已移至universal-cookie。现在，来自通用Cookie存储库的相关示例是：

1
2
3
4
import Cookies from 'universal-cookie';
const cookies = new Cookies();
cookies.set('myCat', 'Pacman', { path: '/' });
console.log(cookies.get('myCat')); // Pacman

相关讨论

我使用react-cookie库在React中设置cookie，它具有选项，您可以传入选项来设置到期时间。

在这里查看

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

1
2
3
4
5
6
7
8
import cookie from"react-cookie";

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

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

使用Vanilla JS，示例

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

有关更多信息，请访问：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/cookie

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

然后导入文件：

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

创建一个cookie密钥：

1
const cookie_key = 'namedOFCookie';

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

1
bake_cookie(cookie_key, 'test');

删除它只是做

1
delete_cookie(cookie_key);

并阅读：

1
read_cookie(cookie_key)

简单易用。

您可以使用默认的javascript cookie设置方法。这个工作完美。

1
2
3
4
5
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脚本功能，如下所示：

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

您可以使用以下方式查看Cookie。

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

请参阅以下文档以获取更多信息-URL

相关讨论

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

要查看Cookie并确保您可以使用https://www.npmjs.com/package/react-native-cookie软件包。
我曾经很满意。

当然，Fetch在这样做时会这样做

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

好吧，但是如何使用它呢？

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

获取Cookie：

1
2
3
4
5
import Cookie from 'react-native-cookie';

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

对于设置的Cookie：

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

只有这个 ？？

但是，如果您想要几个，就可以做到

1-作为嵌套：

1
2
3
4
5
6
7
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-一起回来

1
2
3
4
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');
....

现在，如果要确保已设置cookie，则可以再次获取以确保。

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

一点更新。有一个可用于react-cookie的钩子

1)首先，安装依赖项(仅作说明)

1
yarn add react-cookie

要么

1
npm install react-cookie

2)我的用法示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 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

}

希望对您有所帮助。

非常感谢您提出改进上述示例的建议！