Comment sauvegarder une liste de pages récemment consultées avec Stimulus et localStorage

Créer une liste de “pages récemment consultées” peut améliorer significativement l’expérience utilisateur en fournissant une navigation facile et un historique du contenu récemment accédé. Puisque nous utilisons déjà Rails, nous allons tirer parti de Stimulus. De plus, au lieu de stocker les informations sur le serveur, nous utiliserons localStorage pour persister les données de pages consultées entre les sessions.

Pourquoi Utiliser Stimulus et `localStorage` ?

Habituellement pour les interactions UI, je préfère garder les choses aussi légères que possible. C’est pourquoi je préfère AlpineJS à Stimulus.

Cependant, dans ce cas, Stimulus est un bon choix car il y a un peu plus de logique dans le JavaScript.

Nous utiliserons également localStorage comme mécanisme de stockage côté client. C’est idéal pour sauvegarder des informations non sensibles comme l’historique des pages car les données sont stockées même après que l’utilisateur rafraîchit ou ferme le navigateur.

L’inconvénient d’utiliser localStorage est que si l’utilisateur se connecte depuis un autre ordinateur, cela n’est pas synchronisé. Il est possible de synchroniser ces informations avec une logique supplémentaire dans le contrôleur Stimulus, mais si votre cas d’utilisation est comme le mien, ce n’est probablement pas nécessaire.

L’Objectif

Notre objectif est de construire une liste de pages récemment consultées qui :

Suit les pages visitées par l’utilisateur.
Stocke des métadonnées comme le nom de la page et une courte description.
Affiche jusqu’aux 20 dernières pages récemment visitées.
Persiste ces données entre les sessions en utilisant localStorage.

Le Contrôleur Stimulus

Ci-dessous se trouve un contrôleur Stimulus qui gère le suivi et le stockage des pages visitées par l’utilisateur :

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

export default class extends Controller {
  static targets = ["currentPath"];

  connect() {
    if (this.currentPathTargets.length !== 0) {
      let name = this.currentPathTarget.dataset.name;
      this.saveCurrentPath(name);
    }
  }

  saveCurrentPath(name) {
    let path = window.location.pathname;

    // Créer un objet avec path, name et description
    let pathObject = { path: path, name: name };

    // Supprimer les objets existants avec le même path
    let visitedPaths = this.removePathsContaining(path);

    // Ajouter le nouvel objet au début du tableau
    visitedPaths.unshift(pathObject);

    // Garder seulement les 20 dernières entrées
    if (visitedPaths.length > 20) {
      visitedPaths = visitedPaths.slice(0, 20);
    }

    // Sauvegarder le tableau mis à jour dans localStorage
    localStorage.setItem("visitedPath", JSON.stringify(visitedPaths));
  }

  removePathsContaining(substring) {
    // Obtenir le tableau existant de localStorage
    let visitedPaths = JSON.parse(localStorage.getItem("visitedPath")) || [];

    // Filtrer les objets où le path contient la sous-chaîne
    visitedPaths = visitedPaths.filter(
      (item) => !item.path.includes(substring)
    );

    return visitedPaths;
  }

  resetPaths() {
    // Effacer l'élément visitedPath de localStorage
    localStorage.removeItem("visitedPath");
  }
}

Pour activer ce contrôleur et suivre des pages spécifiques, vous devrez ajouter ceci à la balise body :

<body data-controller="smooth-scroll recently-viewed">
  <div data-recently-viewed-target="currentPath" data-page-name="<%= @page_name %>">
  </div>
  /* Votre code */
</body>

Vous avez la possibilité de refactoriser le code ci-dessus ou de les combiner. Dans mon cas d’utilisation, je voulais ajouter le contrôleur à la balise body pour l’activer, puis optionnellement sauvegarder la page si j’ajoutais la balise div interne.

Utiliser la liste depuis localStorage

Maintenant que vous avez la liste, vous pouvez y accéder avec quelque chose comme ceci :

window.recentlyVisitedPaths = JSON.parse(localStorage.getItem("visitedPath")) || [];

Les valeurs seront maintenant retournées en JSON et vous pouvez les afficher en utilisant Stimulus ou quelque chose de similaire.

Pourquoi Utiliser Stimulus et localStorage ?

L’Objectif

Le Contrôleur Stimulus

Utiliser la liste depuis localStorage

Pourquoi Utiliser Stimulus et `localStorage` ?