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

Berechnungen mit dem Datum
Feiertage, Mondphase, Wochentag, Sonnenaufgang und Sonnenuntergang, Julianisches Datum, Sternzeichen, ...
Suchanfrage an eine Datenbank über AJAX senden und empfangen
Ohne das die Seite neu geladen werden muss, kann man über JavaScript eine Suchanfrage an eine PHP-Datei senden (die dann eine DB-Tabelle ausliest) und die Ergebnisse auf der gleichen Seite ausgibt.
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.
Diese Schlagwörter könnten Sie interessieren:
AJAX CSS-Counter Authentifizierung Sortierung Lokaler Webserver Keyframes EVA-Prinzip Gästebuch Zugriffsrechte Dateibrowser Textgestaltung Formulare Key Codes Event-Kalender MySQL Fotoalbum Rahmen Marquee Suchmaschine RSS Feed Wecker Floodsperre Chatroom ASCII CSRF-Token