Speichern Sie den UI-Status in localStorage mit Stimulus

Dieser Artikel wurde ursprünglich auf Rails Designer veröffentlicht

In SaaS-Apps ist es durchaus üblich, bestimmte Benutzerpräferenzen oder Darstellungseinstellungen zu speichern. Dinge wie Schriftgröße, Themenfarben oder der offene/geschlossene Zustand eines Akkordeons.

(Dieses Beispiel aus meinem neuen SaaS speichert den Status der Navigationsabschnitte)

Sie können diese Einstellungen für den Benutzer speichern, insbesondere wenn Sie sie zwischen Sitzungen oder verschiedenen Browsern wiederherstellen müssen. Ich habe Sie mit diesem Artikel über das Hinzufügen einfacher Einstellungen für Rails abgedeckt. Wenn diese Einstellungen jedoch nicht beibehalten werden müssen, ist dies eine wirklich schöne und einfache Alternative.

Dabei handelt es sich um kleine und wiederverwendbare JavaScript-Funktionen und den localStorage des Browsers. Lasst uns gleich eintauchen.

In diesem Beispiel werde ich das Thema für einen Benutzer speichern, entweder hell oder dunkel. Wenn es dunkel ist, wird dem HTML-Element eine dunkle Klasse hinzugefügt. Dies kann dann verwendet werden, um auf die anderen Elemente abzuzielen (wie mit „dark:bg-gray-950“ bei Verwendung von Tailwind CSS).

Wie so oft bei Stimulus schreiben wir zuerst den HTML-Code. Dies wird uns leiten, was wir als nächstes schreiben sollen:

<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>

Dann der Controller:

// 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");
  }
}

Obwohl es auf den ersten Blick einfach ist, gibt es hier zwei Dinge zu beachten: den Teil { params: { value } } und die beiden Attribute in der Toggle-Methode.

Zuerst die Attribute in der Funktion aktualisieren. Es verwendet etwas namens Zerstören. Klingt schwierig, ist es aber nicht und ist eine wirklich coole Funktion von JavaScript. Schauen wir uns das an, bevor wir fortfahren.

Standardmäßig wird das Ereignis an die Funktion get übergeben, die die Parameter enthält. Das haben Sie wahrscheinlich schon einmal gesehen.

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

Aber wenn Sie nichts anderes im Ereignis-Objekt benötigen, können Sie es weglassen, etwa so:

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

Oder wenn Sie Zerstören verwenden möchten, können Sie Folgendes tun:

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

Cool, oder? Dann der Schalter („dark“, theme === „dark“). Der zweite Parameter (theme === „dark“) ist ein boolescher Force-Parameter, der explizit festlegt, ob die Klasse hinzugefügt (true) oder entfernt (false) werden soll, anstatt nur hin und her zu wechseln

? Fällt Ihnen das alles zu schwer, um es in den Griff zu bekommen? Schauen Sie sich JavaScript für Rails-Entwickler an. ?

Okay, großartig. Mit dem obigen Controller können Sie zwischen Hell- und Dunkelmodus umschalten. Das heißt, wenn Sie Ihr CSS als solches verkabelt haben, aber feststellen, dass nach der Aktualisierung des Bildschirms wieder der Standardbildschirm angezeigt wird. Das gewählte Thema wird nicht beibehalten!

Dazu stellen wir localStorage vor! Es handelt sich um eine Webspeicher-API, mit der Sie Schlüssel-Wert-Paare (Strings) im Browser speichern können.

Aktualisieren wir den Controller, um den gewählten Wert („dunkel“ oder „hell“) zu speichern.

<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>

Dann lesen Sie nach dem Anschließen des Controllers den Wert ab:

// 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");
  }
}

So einfach ist es, einige Einstellungen für einen Benutzer zu speichern. Beachten Sie, dass diese Werte (unverschlüsselt) in ihrem Browser gespeichert werden. Wenn sie also einen anderen Browser verwenden, sind die Einstellungen nicht vorhanden. Es wird aber auch nach einem Neustart des Browsers gespeichert (es sei denn, er löscht es).

Neben setItem und getItem bietet die localStorage-API auch removeItem und clear().

Das obige ist der detaillierte Inhalt vonSpeichern Sie den UI-Status in localStorage mit Stimulus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!