UI für Einstellungen/Settings - sinnvoller Ansatz gesucht

[Michael_K]

Hallo,

der User soll seine EInstellungen bei einer Webapp über ein Modal festlegen können. Das UI soll sich dabei am Ansatz orientieren, den auch Firefox und Chrome für das Menu "Einstellungen" verwendet --> Tab-Liste links und rechts die entsprechenden Einstellungen. Die Einstellungen werden in localStorage gespeichert. Es soll auch möglich sein, über einen Button die Einstellungen auf die Ausgangseinstellungen zurückzusetzen.

Nun kann man das natürlich sehr individuell umsetzen. Ich suche aber einen Ansatz, der dies soweit möglich abstrahiert, d.h. die Standardeinstellungen in einer Datei bündelt und ggfs. ein kleine js Module, dass das UI bei Auswahl generiert. Da ich ungern das Rad neu erfinden möchte ... gibt es hierzu ggfs. eine klein js-Lib oder Modul? Bei den Einstellungen kann es sich um checkbox, listenfelder, String-Werte (z.B. eine Farbe) etc. handeln. Mir fehlt irgendwie das Schlagwort, nachdem man sinnvoll sucht.

Gruss, Michael

[Rolf B]

Hallo Michael_K,

d.h. die Standardeinstellungen in einer Datei bündelt und ggfs. ein kleine js Module, dass das UI bei Auswahl generiert.

Das klingt nach JSON.

Das ist ein Format, in dem JavaScript ein Objekt als String darstellt. Den kannst Du im localStorage ablegen und beim Neuaufruf der Seite laden.

Mit JSON.stringify(object) bekommst Du die Stringdarstellung, mit JSON.parse(string) bekommst Du das Objekt. Bei Date-Objekten ist Vorsicht geboten, die werden im ISO-Format gespeichert und von JSON.parse als String ins Objekt gesetzt. Zu dieser Thematik habe ich vor 6 Jahren 😲 mal was ins Wiki geschrieben.

Deine Defaultsettings kannst Du entweder als Objektliteral hinterlegen oder als vorbereiteten JSON-String. Objektliteral ist einfacher, das steckst Du in eine Funktion/Methode getDefaultSettings und bist fertig.

Für den laufenden Betrieb der Seite verwendest Du das Objektformat. Und nach jeder Änderung im Settings-Dialog (oder nach Bestätigung durch einen Speichern-Button) schreibst Du das stringify-Ergebnis in den localStorage.

Rolf