Establecer cookies en React

1. Cookies en reaccionar
2. Estructura de las Cookies en React
3. Establecer cookies en React

Los desarrolladores de React tienen como objetivo mejorar la experiencia del usuario mejorando la eficiencia y la velocidad de las aplicaciones. A veces, las cookies se pueden utilizar con gran efecto y garantizar una buena experiencia para sus usuarios.

Este artículo demostrará cómo configurar cookies en React.

Cookies en reaccionar

Las cookies son bits de código HTTP que pueden ayudarlo a administrar cómo almacenar bits de datos en el servidor, por lo que estarán disponibles automáticamente la próxima vez que los usuarios visiten su sitio web.

Por ejemplo, esta información puede ser el nombre de usuario, el correo electrónico, el carrito de compras del usuario o el historial de navegación. Las cookies pueden ayudar a los usuarios a reanudar su sesión anterior sin problemas.

React se utiliza para crear aplicaciones de una sola página. Los datos no se cargan desde el servidor, por lo que debemos implementar un enfoque personalizado para almacenar cookies en React.

Dado que estamos tratando con un marco basado en JavaScript, utilizaremos la interfaz web de documento disponible de forma nativa en JavaScript.

Estructura de las Cookies en React

Las cookies suelen estar estructuradas como pares nombre-valor. Por ejemplo, esta es una cookie para recordar el inicio de sesión del usuario hasta la próxima sesión:

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

Como puede ver, usamos la propiedad cookie de la interfaz document y la igualamos al par nombre-valor.

Una cookie puede incluir otros detalles, como cuándo debe caducar. Si no se especifica un parámetro, una cookie se eliminará una vez que los usuarios hayan cerrado su navegador.

Si tiene la intención de establecer varios pares de cookies nombre-valor en JavaScript, sepárelos con punto y coma, así:

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

Establecer cookies en React

Veamos un ejemplo práctico. Aquí, tenemos un componente de aplicación simple en 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>
    );
}

En este ejemplo, configuramos cookies en el método handleClick(), activado al hacer clic en un botón. Alternativamente, puede usar métodos de ciclo de vida o el enlace useEffect para configurar cookies cuando el componente se monta, se desmonta o cada vez que se actualiza.

Puede intentar configurar las cookies usted mismo en esta demostración en vivo. Tenga en cuenta que debe abrir la vista previa en una nueva pestaña; de lo contrario, no podrá ver las cookies actualizadas en la consola.