État de la persistance du recul à l’aide du stockage local / Blogs / Perficient

Avez-vous déjà souhaité que votre application puisse mémoriser des éléments tels que le choix de thème, les préférences ou d’autres paramètres d’un utilisateur, même après le rechargement d’une page ? Bonne nouvelle : c’est tout à fait possible !

Avec Recoil, votre outil de gestion d’état fiable, et localStorage, la mémoire intégrée du navigateur, vous pouvez facilement conserver l’état de votre application. Cela signifie qu’il n’est plus nécessaire de réinitialiser le thème ni de perdre des données lorsque les utilisateurs actualisent ou reviennent plus tard.

Et le meilleur ? Vous n’avez besoin de rien de compliqué. juste quelques lignes de code avec Recoil et localStorage. C’est si simple que vous vous demanderez pourquoi vous ne l’avez pas fait plus tôt !

Ce petit ajustement rend votre application transparente et conviviale, comme si elle disposait d’une mémoire qui se synchronise avec vos utilisateurs.

Prêt à ajouter de la persistance à votre application avec Recoil ? Commençons !

Tout d’abord, consultez mes autres blogs sur Recoil pour avoir une base solide. Je couvre les bases comme Partie d’introduction du recul et Crochets de recul pour vous aider à tirer le meilleur parti de Recoil.

Principaux avantages de la mise en œuvre de la persistance de l’État en recul avec le stockage local –

Exemple de codage :

Implémentons la persistance de l’état dans Recoil avec le stockage local pour la préférence de thème

état.js –

import { atom } from 'recoil';

// Atom to store the mode (light or dark)
export const modeState = atom({
  key: 'modeState',  // Unique ID for the atom
  default: 'light',  
});

App.js-

import React, { useEffect } from 'react';
import { useRecoilState } from 'recoil';
import { modeState } from './state';

const App = () => {
  const [mode, setMode] = useRecoilState(modeState);

  // Load mode from localStorage
  useEffect(() => {
    const savedMode = localStorage.getItem('modeState');
    if (savedMode) {
      setMode(savedMode); // Set the mode if found in localStorage
    }
  }, [setMode]);

  // Save mode to localStorage whenever it changes
  useEffect(() => {
    localStorage.setItem('modeState', mode);
    document.body.className = mode; // Apply the mode to the body class
  }, [mode]);

  return (
    <div>
      <h1>Current Mode: {mode}</h1>
      <button onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}>
        Change Mode
      </button>
    </div>
  );
};

export default App;

Index.js –

import React from 'react';
import ReactDOM from 'react-dom';
import { RecoilRoot } from 'recoil';
import './index.css';
import App from './App';

ReactDOM.render(
  <RecoilRoot>
    <App />
  </RecoilRoot>,
  document.getElementById('root')
);

index.css-

/* Default light mode */
body.light {
  background-color: white;
  color: black;
}

/* Dark mode */
body.dark {
  background-color: #121212;
  color: white;
}

button {
  padding: 10px 20px;
  cursor: pointer;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: #0056b3;
}

Explication:

Cette application enregistre et charge le thème depuis localStorage, et le mode peut être basculé entre clair et sombre.

1. Gestion de l’État: L’atome modeState dans Recoil stocke le mode actuel (clair ou sombre).
2. Persistance: Au chargement de la page, l’application vérifie localStorage pour le mode enregistré. S’il est trouvé, il applique le mode enregistré. Lorsque le mode change, il est réenregistré dans localStorage.
3. Basculement de mode: Un bouton bascule entre les modes clair et sombre, mettant à jour la couleur d’arrière-plan et enregistrant le mode dans localStorage.
4. Actualisation de la page: Le mode sélectionné persiste lors des actualisations de page, en conservant le dernier thème choisi.

Sortir:

1. Lorsque l’application se charge, elle vérifie localStorage pour un mode enregistré (clair ou sombre) et l’utilise. Si aucun mode n’est trouvé, le mode clair est défini par défaut.
2. Cliquer sur le bouton « Changer de mode » permet de basculer entre les modes clair et sombre et de modifier la couleur d’arrière-plan.
3. L’application enregistre le mode sélectionné dans localStorage chaque fois qu’il change.
4. Lorsque vous actualisez la page, l’application récupère le mode enregistré de localStorage et l’utilise en conservant le même mode.

En mode inspection (outils de développement), accédez au Application pour voir les entrées localStorage où le mode clair/sombre est enregistré. Lorsque le mode est basculé, la valeur localStorage est mise à jour avec le nouveau mode. Après avoir actualisé la page, le mode enregistré est récupéré de localStorage et appliqué, ce que vous pouvez vérifier en vérifiant à la fois localStorage et la classe body dans l’onglet Éléments.

En bref, l’utilisation de Recoil avec localStorage enregistre les paramètres utilisateur comme le thème ici entre les sessions et les rechargements de pages, rendant l’expérience plus cohérente et personnalisée.

Conclusion:

Utiliser Recoil avec localStorage est gagnant-gagnant pour les utilisateurs et les développeurs. Pour les utilisateurs, cela signifie que leurs préférences, comme le thème, sont enregistrées au fil des sessions, ce qui rend l’expérience fluide et personnalisée à chaque fois qu’ils reviennent. Pour les développeurs, cela simplifie la gestion de la persistance de l’état. Avec Recoil gérant l’état de l’application et localStorage enregistrant automatiquement les paramètres, les développeurs peuvent se concentrer sur la création d’excellentes fonctionnalités au lieu de se soucier de la sauvegarde et du chargement des données. Cette combinaison rend le processus de développement plus fluide, plus rapide et plus efficace.

C’est terminé pour aujourd’hui ! Mais n’allez pas trop loin. Je vais plonger dans les outils et techniques qui rendent le développement plus facile et plus excitant. D’ici là, continuez à expérimenter, restez curieux et bon codage !