Une préférence utilisateur sans backend, en localStorage

La demande

Un client passe ses journées dans une même liste du back-office, avec de nombreuses colonnes. Il souhaitait pouvoir élargir les colonnes, et les retrouver telles qu'il les avait laissées.

La solution « complète » aurait été une fonctionnalité de préférences : un modèle en base, une API, des droits, une synchronisation entre appareils. Plusieurs semaines de travail pour une largeur de colonne.

Le choix du localStorage

J'ai stocké les largeurs dans le localStorage du navigateur. La fonctionnalité a été livrée dans une seule pull request, sans modification côté serveur.

La limite était indiquée clairement dans l'annonce : les réglages sont enregistrés dans le navigateur, ne concernent pas les autres utilisateurs, et doivent être refaits en cas de changement de navigateur ou d'appareil. Pour une préférence de confort, le compromis me paraît acceptable.

Le code

Le principe repose sur trois événements :

onMouseDown(e) {
  const startX = e.clientX;
  const startWidth = this.th.offsetWidth;

  const onMouseMove = (e) => {
    const newWidth = Math.max(50, startWidth + (e.clientX - startX));
    this.applyWidthToColumn(newWidth);
  };

  const onMouseUp = () => {
    localStorage.setItem(this.localStorageKey, this.th.offsetWidth);
    document.removeEventListener("mousemove", onMouseMove);
    document.removeEventListener("mouseup", onMouseUp);
  };

  document.addEventListener("mousemove", onMouseMove);
  document.addEventListener("mouseup", onMouseUp);
}

La largeur est appliquée pendant le glissement et enregistrée une seule fois, au relâchement. Au chargement, la largeur enregistrée est réappliquée avant toute interaction.

Le point important est la clé : <préfixe de la table>-col-width-<id de la colonne>. Le préfixe isole chaque tableau, et l'identifiant de colonne reste valable si l'ordre des colonnes change.

Quand l'utiliser

On associe souvent le localStorage au choix entre thème clair et sombre, mais il convient à bien d'autres préférences de confort : largeurs de colonnes, vue liste ou calendrier, panneaux repliés, dernier onglet ouvert. Il ne convient pas aux données métier, qui doivent vivre sur le serveur, ni à ce qui doit être partagé entre utilisateurs ou appareils, ni aux données personnelles ou sensibles.

Quelques précautions :

• entourer les lectures et les écritures d'un try/catch (navigation privée, stockage plein ou bloqué)
• versionner les clés si le format change
• garder en tête le quota d'environ 5 Mo par site

Un réglage n'a pas toujours besoin d'une page de paramètres : il suffit parfois que l'interface s'en souvienne.