Wie kann ich ein Cookie in Reaktion setzen?

Ursprünglich verwende ich den folgenden Ajax, um Cookies zu setzen.

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

Jetzt möchte ich das Cookie mithilfe der Funktion zum Hinzufügen von Cookies des Servlets setzen. Aber ich weiß nicht, wie ich meinen Zweck erreichen soll.

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

Was sollte ich auf die Reaktionsseite schreiben, um die Sitzungszeit des Cookies zu erhalten, um das Cookie-Zeitlimit zu verlängern?

Es scheint, dass die zuvor im react-cookienpm-Paket vorhandene Funktionalität in verschoben wurde universal-cookie. Das relevante Beispiel aus dem Universal-Cookie-Repository lautet nun:

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

Verwenden Sie beispielsweise Vanille js

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

Lesen Sie mehr unter: https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

Ich setze Cookies in React mithilfe der React-Cookie-Bibliothek. Sie enthält Optionen, mit denen Sie Optionen zum Festlegen der Ablaufzeit übergeben können.

Schau es dir hier an

Ein Beispiel für die Verwendung für Ihren Fall:

import cookie from "react-cookie";

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

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

Eine sehr einfache Lösung ist die Verwendung des sfcookies-Pakets. Sie müssen es nur mit npm installieren, zum Beispiel: npm install sfcookies --save

Dann importieren Sie die Datei:

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

Erstellen Sie einen Cookie-Schlüssel:

const cookie_key = 'namedOFCookie';

In Ihrer Übermittlungsfunktion erstellen Sie das Cookie, indem Sie die Daten wie folgt speichern:

bake_cookie(cookie_key, 'test');

um es zu löschen, mach es einfach

delete_cookie(cookie_key);

und um es zu lesen:

read_cookie(cookie_key)

Einfach und leicht zu bedienen.

Standardmäßig , wenn Sie holen Ihre URL , Reaktion nativen setzt das Cookie.

Um Cookies anzuzeigen und sicherzustellen, dass Sie das Paket https://www.npmjs.com/package/react-native-cookie verwenden können . Ich war sehr zufrieden damit.

Natürlich macht Fetch das, wenn es das tut

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

Nun, aber wie man es benutzt

--- nach der Installation dieses Pakets ----

um Cookies zu bekommen:

import Cookie from 'react-native-cookie';

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

Cookies setzen:

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

nur das

Aber wenn Sie ein paar wollen, können Sie es tun

1- wie verschachtelt:

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- wieder zusammen

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

Wenn Sie nun sicherstellen möchten, dass die Cookies eingerichtet sind, können Sie sie erneut abrufen, um dies sicherzustellen.

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

Kleines Update. Für React-Cookies steht ein Hook zur Verfügung

1) Installieren Sie zunächst die Abhängigkeit (nur für einen Hinweis)

yarn add react-cookie

oder

npm install react-cookie

2) Mein Anwendungsbeispiel:

// 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

}

Hoffe es ist hilfreich.

Vorschläge zur Verbesserung des obigen Beispiels sind sehr willkommen!

Sie können die Standardmethode zum Festlegen von Javascript-Cookies verwenden. das funktioniert perfekt.

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

Rufen Sie die Java-Skriptfunktion in der Reaktionsmethode wie folgt auf:

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

und Sie können die folgende Methode verwenden, um Cookies anzuzeigen.

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

Weitere Informationen finden Sie im folgenden Dokument - URL