Wie kann ich den Zustand von Schaltern auf einer Website speichern?

Hallo, ich habe 2 Schalter über die der aktuelle Zustand ablesbar sein soll.

Wie kann ich den aktuellen Zustand dieser speichern, sodass wenn die Seite von einem anderen Gerät geöffnet wird, auch der gespeicherte Zustand angezeigt wird?

Der Code für beide Buttons ist baugleich und ist sicher schöner lösbar, aber das sollte eigt eine schnelle und kurze Lösung sein ohne großen Zeitaufwand.

Schonmal danke

Gruß Luca

Answer 1

[regex9]

Hänge zunächst mit JavaScript einen Listener an deine Checkboxen. Sobald sie ihren Status ändern, müsstest du diese Information weitergeben.

function statusChanged(evt) { 
  // handle status change ...
}

document.getElementById("id of your first checkbox").addEventListener("change", statusChanged);
document.getElementById("id of your second checkbox").addEventListener("change", statusChanged);

Wenn du mehr als vier solcher Checkboxen hast, lohnt es sich, sie stattdessen mit einer gleichen Klasse auszustatten, alle Elemente via getElementsByClassName zu holen und mittels for-Schleife die Event Handler für jedes Element zu binden.

Innerhalb deiner Handler-Funktion liest du den aktuellen Wert der Checkbox aus

const checkbox = evt.currentTarget;
const isChecked = checkbox.checked;
const name = checkbox.getAttribute("name");

und verschickst ihn an ein PHP-Skript, welches die Daten permanent speichern wird.

fetch("url/to/save_status.php", {
  method: "POST",
  body: encodeURIComponent(`checkbox=${name}&isChecked=${isChecked}`)
});

Dein PHP-Skript kann die Daten empfangen:

<?php
  if (!isset($_POST['checkbox'])) {
    exit;
  }

  $checkbox = $_POST['checkbox'];
  $isChecked = $_POST['isChecked'] === 'true' ? 1 : 0;

anschließend validieren und bspw. in eine Datenbanktabelle schreiben. Schreibe am besten schon initial Datensätze für deine einzelnen Checkboxen in die Tabelle, denn dann musst du sie nur noch aktualisieren.

$connection = new mysqli(/* ... */);
$statement = $connection->prepare('UPDATE yourTable SET isChecked=? WHERE checkbox=?');
$statement->bind_param('is', $isChecked, $checkbox);

if ($statement->execute()) {
  // success
} 

Schau für weitere Informationen zu MySQLi in die PHP-Dokumentation. Du findest dort komplette Beispiele, wie man eine Datenbankverbindung aufbaut und Anfragen verschickt (Beispielseite).

Damit die Checkboxen nun aber auch beim Laden deiner Seite stets den richtigen Status anzeigen, müsstest du umgekehrt die Werte auch auslesen. Im einfachsten Fall machst du aus deinem HTML-Dokument ein PHP-Skript. In einem PHP-Skriptblock holst du dir via SELECT-Query die Werte deiner Checkboxen

'SELECT checkbox, isChecked FROM yourTable'

um diese für das Rendering des checked-Attributs befragen zu können.

<?php
  /* sql select ... */

  $firstCheckboxStatus = '';
  $secondCheckboxStatus = '';

  while ($row = $result->fetch_assoc()) {
    if ($row['checkbox'] === 'name of first checkbox') {
      $firstCheckboxStatus = $row['isChecked'] == 1 ? 'checked' : '';
    }

    // same for second checkbox ...
  }
?>

Ausgabe einer Checkbox:

<input id="..." class="..." <?= $firstCheckboxStatus ?>>

Eine noch elegantere Lösung würde gelingen, wenn die Checkboxen via Schleife generiert werden würden. Dazu wäre es aber günstig, sich auch alle relevanten, nicht berechenbaren Daten einer Checkbox ebenfalls zu speichern (z.B. die Beschriftung).

Wenn die Checkboxen allerdings ihren aktuellen Status auch ohne Neuladen der Seite aktualisieren sollen, müsstest du erneut JavaScript zu Rate ziehen. Entweder du schickst in regelmäßigen Intervallen eine Anfrage an ein PHP-Skript, welches dir den aktuellen Status aus der Datenbank liefert (dafür kannst du erneut die Fetch API, diesmal in Kombination mit setInterval nutzen) oder du verwendest Server-Sent Events. Zum Ändern des Elements benötigst du lediglich eine Referenz auf das HTML-Element selbst:

yourCheckbox.checked = true; // or false to deactivate

Answer 2

[whgoffline]

Speichern auf andere Gerät könnte man z.B. mit einem Nutzeraccount und mysql machen.

Woher ich das weiß: Studium / Ausbildung – Informatikstudent

Answer 3

[bubbIes]

stichwort datenbank