어떻게 하면 쿠키를 반응시킬 수 있을까요?

어떻게 하면 쿠키를 반응시킬 수 있을까요?

원래 쿠키 설정에는 다음과 같은 아약스를 사용합니다.

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's adding 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 timelimit을 연장하려면 cookie 세션 시간을 받기 위해 리액트 측에 무엇을 써야 합니까?

기능은 것 .react-cookie가 npm으로 되었습니다.universal-cookieuniversal-cookie 저장소의 관련 예는 다음과 같습니다.

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

vanilla js 사용, 예

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

자세한 것은, https://developer.mozilla.org/en-US/docs/Web/API/Document/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

}

도움이 되길 바랍니다.

위의 예를 개선하기 위한 제안 감사합니다!

리액트 쿠키 라이브러리를 사용하여 리액트에서 쿠키를 설정했는데, 만료 시간을 설정하는 옵션에서 전달할 수 있는 옵션이 있습니다.

여기를 봐주세요

고객님의 경우에 사용하는 예를 다음에 나타냅니다.

import cookie from "react-cookie";

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

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

매우 간단한 해결책은 sfcookies 패키지를 사용하는 것입니다.예를 들어 npm을 사용하여 설치해야 합니다.npm install sfcookies --save

그런 다음 다음 파일을 가져옵니다.

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

쿠키 키 생성:

const cookie_key = 'namedOFCookie';

송신 기능에서는, 다음과 같이 데이터를 보존하는 것으로 쿠키를 작성합니다.

bake_cookie(cookie_key, 'test');

삭제하다

delete_cookie(cookie_key);

그리고 읽으려면:

read_cookie(cookie_key)

심플하고 사용하기 쉽다.

기본 Javascript cookie set 메서드를 사용할 수 있습니다.이 완벽한 작업입니다.

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

call Java scripts function in react method는 다음과 같습니다.

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

아래 방법으로 쿠키를 볼 수 있습니다.

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

상세한 것에 대하여는, 다음의 문서를 참조해 주세요(URL).

기본적으로 URL을 가져오면 Respect native가 쿠키를 설정합니다.

쿠키를 표시하고 https://www.npmjs.com/package/react-native-cookie 패키지를 사용할 수 있는지 확인합니다.나는 그것에 매우 만족하곤 했다.

물론 자격 증명 가져오기 구성에서는 이 작업을 수행합니다(제공된 경우).

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

음, 하지만 어떻게 사용하는지

--- 이 패키지를 인스톨 한 후 ----

쿠키를 가져오려면:

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

이제 쿠키가 설정되었는지 확인하려면 쿠키를 다시 가져와 확인할 수 있습니다.

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

그냥 사용하다react-cookie라이브러리:

npm install react-cookie

index.syslog:

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

Js-cookie 패키지 사용

npm i js-1000

import Cookies from 'js-cookie'

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

이 npm 패키지는 나에게도 효과가 있었고, 매우 좋았다.

문서 속성 쿠키를 사용하여 문서와 연결된 쿠키를 읽고 쓸 수 있습니다.이것은 쿠키의 실제 값을 위한 getter 및 setter 역할을 합니다.

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

자세한 것은 이쪽

npm install react-cookie 설치

구문 const [setCookie, removeCookie]= useCookies(['cookie-name')];

파라미터 쿠키: 사용자의 쿠키가 모두 포함된 Javascript 객체입니다.set Cookie:쿠키를 설정하는 기능.removeCookie:쿠키 제거 기능.

예 index.syslogx

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

    ReactDOM.render(
       <CookiesProvider>
          <App />
       </CookiesProvider>,
       document.getElementById('root')
    );

App.jsx

    import React, { useState } from 'react';
    import { useCookies } from 'react-cookie';

    const App = () => {
       const [name, setName] = useState('');
       const [pwd, setPwd] = useState('');
       const [cookies, setCookie] = useCookies(['user']);

       const handle = () => {
          setCookie('Name', name, { path: '/' });
          setCookie('Password', pwd, { path: '/' });
       };
       return (
          <div className="App">
          <h1>Name of the user:</h1>
          <input
             placeholder="name"
             value={name}
             onChange={(e) => setName(e.target.value)}
          />
          <h1>Password of the user:</h1>
          <input
             type="password"
             placeholder="name"
             value={pwd}
             onChange={(e) => setPwd(e.target.value)}
          />
          <div>
             <button onClick={handle}>Set Cookie</button>
          </div>
       </div>
       );
    };
    export default App;

언급URL : https://stackoverflow.com/questions/39826992/how-can-i-set-a-cookie-in-react