如何在反应中设置 cookie？

Posted 2023-03-10

【中文标题】如何在反应中设置 cookie？

【英文标题】：How can I set a cookie in react?

【发布时间】：2017-02-11 03:01:07

【问题描述】：

最初，我使用以下 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的会话时间？

【参考方案1】：

似乎以前存在于react-cookie npm 包中的功能已移至universal-cookie。 universal-cookie repository 现在的相关示例是：

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

【讨论】：

嗨，我已经安装了这个包，但是导入它时出现一些错误错误：ENOENT：没有这样的文件或目录，打开'D：\ XXX项目\用户22 oct\Application1\node_modules\universal- cookie\node_modules\cookie\index.js'

@K.S npm install universal-cookie?检查消息中的路径。如果它不存在，你还没有安装它。

这个包有一些问题。只要您没有重新加载页面，您就可以访问 cookie。重新加载后，你会得到undefined（可能是因为var cookies = new Cookies()这一行，我不知道）。好累。我在这个问题上花了一天时间，但还没有答案。我要更改我的 cookie 包。

【参考方案2】：

使用vanilla js，示例

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

阅读更多：https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

【参考方案3】：

我使用 react-cookie 库在 React 中设置 cookie，它有一些选项，你可以传入选项来设置过期时间。

看看here

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

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 包已更新（损坏）此解决方案中使用的 API。 +1 链接，我在下面发布了更新的答案。

【参考方案4】：

小更新。 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 过期后将用户注销。登录表单还是主页？

【参考方案5】：

一个非常简单的解决方案是使用 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)

简单易用。

【讨论】：

我已经尝试过react-cookie，universal-cookie，经过一天与undefined 的cookies.get("cookie_name") 的这些包的结果的斗争，我终于遇到了这个解决方案并且包sfcookies 工作为了我。太感谢了！你救了我！

【参考方案6】：

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

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

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

【讨论】：

很好的解决方案 - 使用标准的 JS API 而不是额外的依赖。有关 document.cookie API 的完整文档，请参阅 developer.mozilla.org/en-US/docs/Web/API/Document/cookie。

【参考方案7】：

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

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

当然，Fetch credentials 配置在提供时会这样做

credentials: "include", // or "same-origin" or "omit"

好吧，但是如何使用它

---安装此包后----

获取 cookie：

import Cookie from 'react-native-cookie';

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

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

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

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

【参考方案8】：

使用Js-cookie包

npm i js-cookie

import Cookies from 'js-cookie'

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

这个 npm 包对我有用，也很好

【参考方案9】：

只需使用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
);

用法：

反应钩子：

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

class-based组件：

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

【参考方案10】：

Document 属性 cookie 允许您读取和写入与文档关联的 cookie。它充当 cookie 实际值的 getter 和 setter。

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

Know more