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

Formulardaten über AJAX überprüfen und speichern
Ohne lästigen Seitenwechsel werden die eingegebenen Daten im Formular überprüft und gespeichert.
Artikel über Checkboxen auswählen
Hier können Artikel (Bilder) ausgewählt werden die bestimmte Kriterien der Checkboxen erfüllen. Die Daten werden in einer CSV-Datei gespeichert und können individuell angepasst werden.
Verkettete Auswahllisten dynamisch aus einer DB-Tabelle generieren
Dieses Beispiel zeigt, wie man eine HTML-Auswahlliste (Drop-Down-Liste) dynamisch generiert, die auf den Werten einer Spalte in einer Datenbank-Tabelle beruht.
Diese Schlagwörter könnten Sie interessieren:
Blätterfunktion Sitemaps-Protokoll Textgestaltung Sortierung RSS Feed Metadaten Formulare Suchmaschine Sicherheit localStorage Dateibrowser SQLite Zeitfunktionen Rahmen Floodsperre Mimetypen Operatoren Lokaler Webserver Hover-Effekt MySQL