logo标签列表

我该如何在React中设置cookie？

reactjscookies
133

最初，我使用以下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的添加cookie函数来设置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的会话时间？

为了延长cookie的有效期，我应该在React端编写什么代码来获取cookie的会话时间？

12个回答
245

看起来之前在react-cookie npm包中的功能已被移动到universal-cookie中。相关示例可以从universal-cookie存储库中找到:

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

小更新。React-Cookie现在有一个可用的钩子。

1）首先，安装依赖项（仅供参考）。

yarn add react-cookie
或者
npm install react-cookie

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

}

希望这对您有所帮助。

非常欢迎改善以上示例的建议！

响应变量是做什么的，它获得了什么值？另外，最理想的位置在哪里设置令牌，以便一旦Cookie过期就注销用户，登录表单还是主页？ - Bruno
18

我使用 react-cookie 库在 React 中设置 cookies，它提供了选项可以传递到其中以设置过期时间。

点击此处查看。

以下是一个关于如何使用它的示例：

import cookie from "react-cookie";

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

  cookie.set("onboarded", true, {path: "/", expires: d});
};
3
看起来 react-cookie 包已经更新（破坏）了该解决方案中使用的 API。感谢提供链接，我已在下面发布了更新后的答案。 - speckledcarp
16

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

npm install sfcookies --save

然后在文件中导入即可：

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

创建一个cookie键：

const cookie_key = 'namedOFCookie';

在您的提交函数中，您可以通过像这样保存数据来创建 cookie：

bake_cookie(cookie_key, 'test');

要删除它，只需执行

delete_cookie(cookie_key);

并阅读它：

read_cookie(cookie_key)

简单易用。

3
我已经尝试了 react-cookie， universal-cookie，但是在使用这些包的 cookies.get("cookie_name") 时遇到了一整天的 undefined 结果。最终我找到了解决方案，使用了 sfcookies 包，它对我起作用了。非常感谢！你救了我！ - Mahdieh Shavandi
15

你可以使用默认的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方法中调用JavaScript函数：

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

你可以使用以下方法查看 cookies。

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

请参考下面的文档获取更多信息 - URL

2
好的解决方案 - 使用标准JS API而不是额外的依赖项。请参阅https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie以获取document.cookie API的完整文档。 - Cornflex
8
默认情况下，当您获取URL时，React Native会设置cookie。
要查看cookie并确保您可以使用https://www.npmjs.com/package/react-native-cookie软件包。
当提供时，Fetch凭据配置也会执行此操作。
credentials: "include", // or "same-origin" or "omit"

好的，请问需要翻译什么内容？

安装完这个软件包之后，如何使用它？

获取cookies的方法：

import Cookie from 'react-native-cookie';

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

设置cookies：

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');
....

现在，如果您想确保cookie已经设置好了，您可以再次获取以确保。
Cookie.get('url').then((cookie) => {
  console.log(cookie);
});
8

只需使用 react-cookie 库：

npm install react-cookie

index.js:

import React from "react";
import ReactDOM from "react-dom";
import { CookiesProvider } from "react-cookie";
import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <CookiesProvider>
    <App />
  </CookiesProvider>,
  rootElement
);

用法:

React钩子：

import React from "react";
import { useCookies } from "react-cookie";

export default function App() {
  const [cookies, setCookie] = useCookies(["user"]);

  function handleCookie() {
    setCookie("user", "gowtham", {
      path: "/"
    });
  }
  return (
    <div className="App">
      <h1>React cookies</h1>
      <button onClick={handleCookie}>Set Cookie</button>
    </div>
  );
}

基于类的组件：

import React, { Component } from "react";
import { instanceOf } from "prop-types";
import { withCookies, Cookies } from "react-cookie";

class App extends Component {
  static propTypes = {
    cookies: instanceOf(Cookies).isRequired
  };

  state = {
    user: this.props.cookies.get("user") || ""
  };

  handleCookie = () => {
    const { cookies } = this.props;
    cookies.set("user", "gowtham", { path: "/" }); // setting the cookie
    this.setState({ user: cookies.get("user") });
  };

  render() {
    const { user } = this.state;
    return (
      <div className="App">
        <h1>React cookies</h1>
        {user && <p>{user}</p>}
        <button onClick={this.handleCookie}>Set Cookie</button>
      </div>
    );
  }
}

export default withCookies(App);
5

使用Js-cookie包

安装npm i js-cookie

import Cookies from 'js-cookie'

Cookies.set('auth', 'data') 
Cookies.get('auth')

这个npm包对我来说很实用，而且效果也很不错。
1

Document 属性 cookie 允许您读取和写入与文档相关的 cookie。它作为获取器和设置器，用于实际 cookie 值的读取和设置。

document.cookie = "doSomethingOnlyOnce=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; SameSite=None; Secure";

了解更多

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接