Ein Skript von Werner-Zenk.de in etwas abgeänderter Form.
Ich verwende hier tatsächlich auf dieser Seite, anstelle von "LocalStorage" ein "SessionStorage".
Der Unterschied liegt nur darin, dass "SessionStorage" mit dem Schließen vom Browser-Fenster auch gelöscht wird, sodass mein Datenschutzhinweis als Beispiel bei einem erneuten Aufruf dieser Seite auch wieder zu sehen ist. "LocalStorage" bleibt dagegen dauerhaft im verwendeten Browser gespeichert, bis man die Cookies und den Webspeicher vom Browser löscht.
Ich habe hier dieses Skript von Werner-Zenk.de als Beispiel für ein "Local Storage" verwendet und noch zusätzlich ein Overlay zur Abdunklung der Seite eingefügt, das auch den Sinn hat, die Links der Navigation bis zu der Zustimmung des Benutzers zu überdecken und somit nicht klickbar zu machen.
Dieses JavaScript gehört, um auf allen Seiten eines Projektes zu wirken, in die > "Site-Einstellungen" > "Global HTML insert" in den Bereich "Before </body> code", also an das Ende vom <body>
Bitte ersetzt oben im Skript "Link-zur-Datenschutzerklärung" mit der URL zu eurer Datenschutzerklärung.
<script>
// DSGVO - Datenschutz-Hinweis
var LinkZurDatenschutzerklaerung = "Link-zur-Datenschutzerklärung";
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 Webseite verwendet Cookies. Indem Sie fortfahren, stimmen Sie unserer Datenschutzerklärung zu.</p>' +
'<p><a href="' + LinkZurDatenschutzerklaerung + '" class="dsgvo_hinweis_button" target="_blank">Datenschutzerklärung</a>' +
'<a href="javascript:akzeptieren();" class="dsgvo_hinweis_button">Alle akzeptieren</a></p>';
// Overlay Element
var overlay = document.createElement("div");
overlay.id = "overlay";
overlay.style.background = "rgba(0, 0, 0, 0.6)";
overlay.style.position = "fixed";
overlay.style.top = 0;
overlay.style.left = 0;
overlay.style.width = "100%";
overlay.style.height = "100%";
overlay.style.zIndex = 1050;
// Overlay zur Seite hinzufügen
document.body.appendChild(overlay);
}
});
function akzeptieren() {
window.localStorage.setItem("DSGVO", "true");
document.getElementById("dsgvo_hinweis").style.display="none";
// Overlay von Seite entfernen
document.body.removeChild(overlay);
}
// localStorage löschen über onClick
function deleteItem() {
window.localStorage.removeItem("DSGVO");
}
</script>
Um das LocalStorage, so wie ich oben am Button "Lösche Browser Storage" das LocalStorage mittels Klick löschen zu können, habe ich unten im JavaScript dazu die Funktion deleteItem() hinzugefügt. Dem Button selbst habe ich dann im Mobirise Link-Fenster am Custom-Bereich mit den drei Punkten ... diesen Link gegeben, damit die Seite sogleich neu geladen wird:
javascript: location.reload();
Dann habe ich im "Code Editor" die onClick Anweisung zu dieser JavaScript-Funktion hinzugeschrieben, sodass der gesamte Quelltext vom Button dann ungefähr so aussieht:
<div class="mbr-section-btn align-center" mbr-buttons mbr-theme-style="display-4" data-toolbar="-mbrBtnMove"><a class="btn btn-primary" href="javascript: location.reload();" onclick="deleteItem()" data-app-placeholder="Type Text">Lösche Browser Storage</a></div>
Die CSS zu diesem Datenschutzhinweis könnt ihr natürlich beliebig anpassen, achtet aber auf den z-index, der hier höher sein muss als im JavaScript, damit das Hinweis-Fenster auch auf dem Overlay liegt und nicht darunter.
Diese Style-Anweisung gehört, um auf allen Seiten eines Projektes zu wirken, in die > "Site-Einstellungen" > "Global HTML insert" in den Bereich "Before </head> code", also an das Ende vom <head>
<style>
div#dsgvo_hinweis {
position: Fixed;
bottom: 0px;
left: 0px;
width: 100%;
z-index: 1100;
text-align: Center;
cursor: Default;
background-color: rgba(234, 239, 241, 0.9);
border-top: Solid 1px rgb(168, 188, 198); padding-bottom: 20px;
}
/* Abstand von der Schrift */
div#dsgvo_hinweis p {
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
}
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>