Stocker l'état de l'interface utilisateur dans localStorage avec Stimulus

Cet article a été initialement publié sur Rails Designer

Il est assez courant dans les applications SaaS de stocker certaines préférences utilisateur ou paramètres d'apparence. Des éléments tels que la taille de la police, les couleurs du thème ou l'état ouvert/fermé d'un accordéon.

(cet exemple de mon nouveau SaaS stocke l'état des sections de navigation)

Vous pouvez enregistrer ces paramètres pour l'utilisateur, surtout si vous devez les restaurer entre des sessions ou différents navigateurs. Je vous ai couvert avec cet article sur l'ajout de préférences simples pour Rails. Mais si ces paramètres n'ont pas besoin d'être conservés, c'est une alternative vraiment intéressante et simple.

Il s'agit d'une petite fonction JavaScript réutilisable et du localStorage du navigateur. Allons-y directement.

Pour cet exemple, je vais stocker le thème pour un utilisateur, clair ou sombre. Lorsqu'il est sombre, une classe sombre est ajoutée à l'élément html. Cela peut ensuite être utilisé pour cibler ceux de l'autre élément (comme avec dark:bg-gray-950 lors de l'utilisation de Tailwind CSS).

Comme souvent avec Stimulus, écrivons d'abord le HTML. Cela nous guidera sur ce qu'il faut écrire ensuite :

<div data-controller="theme">
  <!-- You can show/hide these buttons based on the .dark class -->
  <button data-action="theme#update" data-theme-value-param="dark">
    Lights Off
  </button>

  <button data-action="theme#update" data-theme-value-param="light">
    Lights On
  </button>
</div>

Puis le contrôleur :

// app/javascript/controllers/theme_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  update({ params: { value } }) {
    this.#setClass(value);
  }

  // private

  #setClass(theme) {
    document.documentElement.classList.toggle("dark", theme === "dark");
  }
}

Bien que simple en apparence, il y a deux choses à noter ici : la partie { params: {value } } et les deux attributs de la méthode toggle.

D'abord les attributs dans la fonction update. Il utilise quelque chose appelé destructeur. Cela semble difficile, mais ce n'est pas le cas et c'est une fonctionnalité vraiment intéressante de JavaScript. Vérifions-le avant d'aller plus loin.

Par défaut, l'événement est passé à la fonction get qui contient les paramètres. Vous avez probablement déjà vu cela.

get(event) {
  log(event.params.value)
  // => "light" or "dark"
}

Mais si vous n'avez besoin de rien d'autre dans l'objet event, vous pouvez l'omettre, comme ceci :

get({ params }) {
  log(params.value)
  // => "light" or "dark"
}

Ou lorsque vous souhaitez utiliser la destruction, vous pouvez faire ceci :

get({ params: { value } }) {
  log(value)
  // => "light" or "dark"
}

Cool, non ? Puis le toggle("dark", theme === "dark"). Le deuxième paramètre (theme === "dark") est un paramètre de force booléenne qui définit explicitement si la classe doit être ajoutée (true) ou supprimée (false), plutôt que de simplement basculer d'avant en arrière

? Vous trouvez tout cela trop difficile à comprendre ? Découvrez JavaScript pour les développeurs Rails. ?

D'accord, super. Avec le contrôleur ci-dessus, vous pouvez basculer entre les modes clair et sombre. Autrement dit, si votre CSS est connecté en tant que tel, mais que vous remarquez qu'une fois l'écran actualisé, l'écran par défaut est de retour. Le thème choisi n'est pas persistant !

Pour cela, introduisons localStorage ! Il s'agit d'une API de stockage Web qui vous permet de stocker des paires clé-valeur (chaînes) dans le navigateur.

Mettons à jour le contrôleur pour stocker la valeur choisie ("dark" ou "light").

<div data-controller="theme">
  <!-- You can show/hide these buttons based on the .dark class -->
  <button data-action="theme#update" data-theme-value-param="dark">
    Lights Off
  </button>

  <button data-action="theme#update" data-theme-value-param="light">
    Lights On
  </button>
</div>

Puis lors de la connexion du contrôleur, lisez la valeur :

// app/javascript/controllers/theme_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  update({ params: { value } }) {
    this.#setClass(value);
  }

  // private

  #setClass(theme) {
    document.documentElement.classList.toggle("dark", theme === "dark");
  }
}

C'est aussi simple qu'il est de stocker certains paramètres pour un utilisateur. Notez que ces valeurs sont stockées (non chiffrées) dans leur navigateur. Donc s’ils utilisent un autre navigateur, les paramètres ne sont pas là. Mais il est également stocké après le redémarrage du navigateur (à moins qu'il ne l'efface).

Outre setItem et getItem, l'API localStorage également removeItem et clear().

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!