Setze Cookies in React

1. Kekse in Reaktion
2. Aufbau von Cookies in React
3. Setze Cookies in React

Die React-Entwickler zielen darauf ab, die Benutzererfahrung zu verbessern, indem sie die Effizienz und Geschwindigkeit der Anwendungen verbessern. Manchmal können Cookies mit großer Wirkung eingesetzt werden und eine gute Erfahrung für Ihre Benutzer gewährleisten.

Dieser Artikel zeigt, wie man Cookies in React setzt.

Kekse in Reaktion

Cookies sind Bits des HTTP-Codes, mit denen Sie verwalten können, wie Bits von Daten auf dem Server gespeichert werden, damit sie automatisch verfügbar sind, wenn Benutzer Ihre Website das nächste Mal besuchen.

Diese Informationen können beispielsweise der Benutzername, die E-Mail-Adresse, der Einkaufswagen des Benutzers oder der Browserverlauf sein. Cookies können Benutzern helfen, ihre vorherige Sitzung nahtlos fortzusetzen.

React wird verwendet, um Single-Page-Anwendungen zu erstellen. Die Daten werden nicht vom Server geladen, daher müssen wir einen benutzerdefinierten Ansatz zum Speichern von Cookies in React implementieren.

Da wir es mit einem JavaScript-basierten Framework zu tun haben, verwenden wir das nativ in JavaScript verfügbare Webinterface document.

Aufbau von Cookies in React

Cookies sind normalerweise als Name-Wert-Paare strukturiert. Dies ist beispielsweise ein Cookie, um sich die Anmeldung des Benutzers bis zur nächsten Sitzung zu merken:

document.cookie = `login=sample@gmail.com`

Wie Sie sehen können, haben wir die Eigenschaft cookie der Schnittstelle document verwendet und sie gleich dem Paar name-value gesetzt.

Ein Cookie kann andere Details enthalten, z. B. wann es ablaufen soll. Wenn ein Parameter nicht angegeben wird, wird ein Cookie gelöscht, sobald die Benutzer ihren Browser schließen.

Wenn Sie beabsichtigen, mehrere Name-Wert-Paare von Cookies in JavaScript zu setzen, trennen Sie sie wie folgt durch Semikolons:

document.cookie = `name=value; expires=expirationTime; path=domainPath`

Setze Cookies in React

Schauen wir uns ein praktisches Beispiel an. Hier haben wir eine einfache App-Komponente in React.

export default function App() {
    const handleClick = () => {
        document.cookie = "username=admin";
        console.log(document.cookie);
    };
    return (
        <div className="App">
            <h1>Hello CodeSandbox</h1>
            <button onClick={() => handleClick()}>Set cookies</button>
        </div>
    );
}

In diesem Beispiel setzen wir Cookies in der Methode handleClick(), ausgelöst durch einen Klick auf einen Button. Alternativ können Sie Lebenszyklusmethoden oder den Hook useEffect verwenden, um Cookies einzurichten, wenn die Komponente gemountet, unmountet oder jedes Mal aktualisiert wird.

In dieser Live-Demo können Sie versuchen, die Cookies selbst zu setzen. Beachten Sie, dass Sie die Vorschau in einem neuen Tab öffnen müssen; Andernfalls können Sie die aktualisierten Cookies nicht in der Konsole sehen.