Mittels history.back() zum vorherigen Zustand des Dokuments zurück?

[Felix Riesterer]

Liebe Mitlesende,

für unser neues Frickl suche ich nach einer eleganten Methode, mittels JavaScript den Inhalt der Seite komplett so zu ersetzen, dass ein history.back() den vorherigen Zustand wieder herstellt. Dazu gedachte ich history.pushState() zu verwenden. Jedoch lande ich mit dem Zurück-Button, der sich ja wie history.back() verhält, auf der vorherigen Seite, anstatt auf der, welche mein JavaScript umgestaltet hat. Obendrein: Die Seite lädt dann neu, was ich ja eigentlich zu vermeiden suche.

history.pushState(
  {},
  "",
  location.href.replace(/#.*/, "") + "#kitchen-sink"
);

document.title = "Ausprobieren";

document.body.innerHTML = [
  "<h1>Ausprobieren</h1>",
  "<p>...</p>"
].join("\n");

Wenn es keine reguläre Möglichkeit gibt, mein Vorhaben auf diese Weise zu realisieren, muss ich eben auf eine Art bildschirmfüllendes Modal zurückgreifen, welches durch CSS mit :target (un)sichtbar wird.

Wie bringe ich den Browser dazu, dass er sich den Zustand der Seite merkt, mir eine „neue“ Seite zugesteht, die ich mit meinem JavaScript nach Belieben gestalten kann, um dann mit dem Zurück-Button den Umbau ungeschehen machen zu können?

Liebe Grüße

Felix Riesterer