Il termine cookie HTTP è stato coniato dai biscotti della fortuna. I biscotti della fortuna risalgono al XIX secolo a Kyoto in Giappone. All'interno di questi cookie sono incorporati messaggi speciali. Lou Montulli, uno sviluppatore web, ha utilizzato questa idea e il metodo utilizzato dai sistemi Unix per inviare piccoli file di dati da un programma a un altro senza modifiche per inventare i cookie HTTP.

In questo tutorial, esploreremo i cookie HTTP utilizzando JavaScript e come ho eseguito un gioco di topi, cercando di impostare e recuperare i cookie.

Dichiarazione problema

Ho una richiesta get con una funzione di callback contenente un file accessToken. Successivamente, vorrei recuperare le informazioni sull'utente, utilizzando il accessTokenfile generato, che verrà eseguito con una richiesta di recupero.

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

Soluzione Biscotti alla vaniglia

La prima soluzione che mi è venuta in mente è memorizzare il valore come cookie. In questo modo, dobbiamo solo recuperare il valore del cookie ogni volta che ne abbiamo bisogno.

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

let userinfo = document.cookie

Questo è diventato un grosso problema poiché ho bisogno di recuperare il cookie registrato da una pagina diversa. La funzione di ricarica della finestra avrebbe potuto risolvere questo problema se stavo costruendo con JavaScript vanilla.

window.location.reload()

Soluzione Reagire Cookie

Nella mia ricerca per trovare una soluzione, ho trovato la perfetta libreria di cookie React . Seguendo le istruzioni, sono arrivato a questo:

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

Stato di reazione al salvataggio

L'implementazione del flusso di progettazione comporta il recupero delle informazioni utente, la loro memorizzazione e la navigazione verso una nuova pagina con le informazioni salvate. Con React useNavigate, possiamo memorizzare le informazioni dell'utente nello stato durante la navigazione.

.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;
}

Ho concluso con successo l'inseguimento del gatto e del topo usando lo stato React. In questo articolo, abbiamo esplorato come passare le informazioni attraverso i componenti React. Innanzitutto, abbiamo esplorato i cookie JavaScript vanilla. Successivamente, abbiamo utilizzato la libreria di cookie React e infine lo stato React.