Datenschutz-Hinweis über Cookies dauerhaft ausblenden

Hier zeige ich, wie der Datenschutz-Hinweis über Cookies (LocalStorage) dauerhaft ausgeblendet werden kann. Natürlich verschwindet der Hinweis nur, so lange wie die Cookies im Browser erhalten bleiben (siehe: Cookies und Cache im Browser löschen).

👁️ Live-Demo anzeigen - Datenschutz-Hinweis über Cookies dauerhaft ausblenden
Live-Demo - Datenschutz-Hinweis über Cookies dauerhaft ausblenden

1. Dieses JavaScript kommt in den <head>-Bereich.
Passen Sie den Dateipfad / Dateinamen zur Datenschutzerklärung an.

<script>
// DSGVO - Datenschutz-Hinweis

var LinkZurDatenschutzerklaerung = "datenschutzerklaerung.php";

window.addEventListener("DOMContentLoaded", function () {
 if (!window.localStorage.getItem("DSGVO")) {
  document.getElementsByTagName("body")[0].appendChild(document.createElement("div")).setAttribute("id", "dsgvo_hinweis");
  document.getElementById("dsgvo_hinweis").innerHTML = '<p>' +
  'Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.</p>' +
  '<p><a href="' + LinkZurDatenschutzerklaerung + '" class="dsgvo_hinweis_button" target="_blank">Datenschutzerklärung</a>' +
  '<a href="javascript:akzeptieren();" class="dsgvo_hinweis_button">Akzeptieren</a></p>';
 }
});

function akzeptieren() {
  window.localStorage.setItem("DSGVO", "true");
  document.getElementById("dsgvo_hinweis").style.display="none";
}
</script>

2. Um den Datenschutz-Hinweis etwas zu stylen, benötigt man diese CSS-Angaben (kann natürlich angepasst werden).

<style>
/* DSGVO - Datenschutz-Hinweis */

div#dsgvo_hinweis {
 position: Fixed;
 bottom: 0px;
 left: 0px;
 width: 100%;
 z-index: 1000;
 text-align: Center;
 cursor: Default;
 background-color: rgba(234, 239, 241, 0.9);
 border-top: Solid 1px rgb(168, 188, 198);
}

a.dsgvo_hinweis_button,
a.dsgvo_hinweis_button:visited {
 text-decoration: None;
 padding: 7px;
 background-color: rgb(0, 191, 0);
 color: rgb(255, 255, 255);
 margin-right: 10px;
}

a.dsgvo_hinweis_button:hover, 
a.dsgvo_hinweis_button:active {
 background-color: rgb(0, 166, 0);
 color: rgb(255,255, 255);
}
</style>

3. Fertig!

Tipps

Download-Archiv
Mit dem Download-Archiv können Sie Bilder, PDF-Dateien, ZIP-Archive und so weiter auf dem Server hochladen. Die Datei-Infos (Dateiname, Beschreibung, Dateigröße und das Datum) werden in einer SQLite-Datenbank gespeichert.
Responsives Design
Ob ein großer Monitor, ein Tablet oder Smartphone verwendet wird, das Design der Seite sollte sich automatisch der Größe des Gerätes anpassen.
Mit PHP schreiben und lesen
Hier möchte ich an Beispielen zeigen, wie eine .txt-Datei mit PHP erstellt wird und wie diese ausgelesen werden kann.
Seiten dynamisch mit PHP erstellen
Vielleicht kennen Sie dieses Problem: Sie möchten gerne eine Seite ohne Frames erstellen, wollen aber auch nicht bei jeder Änderung an der Navigation alle Seiten ändern. Nur mit HTML gibt es hier keine Lösung und nicht jeder Benutzer hat JavaScript im Browser aktiviert, stattdessen sollten Sie auf PHP zurückgreifen.

Abonniere meinen RSS-Feed um über aktuelle Seiten benachrichtigt zu werden.