Der Begriff HTTP-Cookies wurde von Glückskeksen geprägt. Glückskekse reichen bis ins 19. Jahrhundert in Kyoto Japan zurück. In diese Cookies sind spezielle Nachrichten eingebettet. Lou Montulli , ein Webentwickler, nutzte diese Idee sowie die Methode, die von Unix-Systemen verwendet wird, um kleine Datendateien ohne Änderung von einem Programm an ein anderes zu senden, um HTTP-Cookies zu erfinden.

In diesem Tutorial werden wir HTTP-Cookies mit JavaScript untersuchen und wie ich ein Mausspiel durchgeführt habe, um Cookies zu setzen und abzurufen.

Problemstellung

Ich habe eine Get-Anfrage mit einer Callback-Funktion, die eine accessToken. Als Nächstes möchte ich mithilfe der accessTokengenerierten Benutzerinformationen abrufen, was mit einer Abrufanforderung erfolgt.

callback: (response) => {
      // run fetch request to get user info
      let value = fetch(url + response.access_token, {
        method: 'GET',
        headers: {
          'Accept': 'application/json',
        },
      })
        .then(value => value.json())
        .then(text => console.log(text))
    }

.then(text => return text)

function callme() {
  callback: (response) => {
      ...
    }
}

let userinfo = callme();

Lösung Vanillekekse

Die erste Lösung, die mir in den Sinn kam, ist das Speichern des Werts als Cookie. Auf diese Weise müssen wir den Cookie-Wert nur abrufen, wann immer wir ihn brauchen.

.then(text => document.cookie = "userinfo=" + JSON.stringify({ username: text.name, userimg: text.picture }))

let userinfo = document.cookie

Dies wurde zu einem großen Problem, da ich das registrierte Cookie von einer anderen Seite abrufen muss. Die Fensterneuladefunktion hätte dies beheben können, wenn ich mit Vanille-JavaScript erstellt hätte.

window.location.reload()

Lösung Reagieren Cookies

Bei meiner Suche nach einer Lösung habe ich die perfekte React-Cookie-Bibliothek gefunden . Nach der Anleitung bin ich zu folgendem gekommen:

(Pageone.jsx)

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

export default function Pageone() {
  const [setCookie] = useCookies(["user"]);

  function myCookie() {
    setCookie("user", "blah", {
      path: "/"
    });
  }
  return (
    <button onClick={myCookie()}>Set Cookie</button>
  );
}
(Pagetwo.jsx)

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

export default function Pagetwo() {
  const [cookies] = useCookies(["user"]);

  return (
    <div className="Pagetwo">
      <h1>React cookies</h1>
       {cookies.user && <p>{cookies.user}</p>}
      <button onClick={myCookie()}>Set Cookie</button>
    </div>
  );
}

Reagieren Sie auf die Rettung

Die Design-Flow-Implementierung umfasst das Abrufen der Benutzerinformationen, deren Speicherung und das Navigieren zu einer neuen Seite mit den gespeicherten Informationen. Mit React useNavigatekönnen wir Benutzerinformationen während der Navigation im Zustand speichern.

.then(text => navigate('/', { state:{username:text.name, userimg:text.picture}}))

import { useLocation } from 'react-router-dom';

const Sidebar = () => {
  const location = useLocation();
  // retrieve userimg
  let userimg = location.state.userimg;
  // retrieve username
  let username = location.state.username;
}

Ich habe die Katz-und-Maus-Jagd erfolgreich mit dem React-Zustand beendet. In diesem Artikel haben wir untersucht, wie Informationen über React-Komponenten weitergegeben werden. Zuerst haben wir Vanilla-JavaScript-Cookies untersucht. Als nächstes haben wir die React-Cookie-Bibliothek und schließlich den React-Zustand verwendet.