• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Cookie Hinweis wird täglich angezeigt!

D

DanielCGN

Mitglied
Hallo,
ich habe eine index-Seite mit einem Cookie-Hinweis als Popup erstellt.

Dieser Hinweis soll, nachdem man Cookies akzeptiert hat, erst nach 30 Tagen erneut erscheinen.

Das Script habe ich aus einem YouTube-Tutorial. Daraufhin habe ich erfolgreich in Html das Popup erstellt und mit CSS gestylt.

In Java habe ich die Funktion des "Akzeptieren"-Buttons eingerichtet. Laut dem Script soll der Cookie-Hinweis erst in 30 Tagen erneut gezeigt werden.

Und das funktioniert leider nicht. Stattdessen erscheint der Cookie-Hinweis nach jedem Reload der Seite erneut!

Wenn ich im Mozilla-Browser die Seite untersuchen lasse, wird mir angezeigt, dass tatsächlich Cookies für 30 Tage gespeichert werden. Das passiert, wenn ich den "Akzeptieren"-Button angeklickt habe. Lade ich die Seite erneut, erscheint der Cookie-Hinweis wieder! Die Untersuchung der Seite zeigt mir aber, dass Cookies für 30 Tage gespeichert wurden. Demnach dürfte der Cookie-Hinweis nicht erscheinen.

Wo liegt der Fehler? Für Hinweise und Tipps bin ich dankbar!

Hier alle Scripte:
HTML

HTML: 
<!DOCTYPE html>
<html lang="de-DE">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">   
    <meta name="description" content="Internetradio mit dem besten Mix aus Clubbing und Oldschool. Vocal-House | Dutch-House | Latin-House | Classic-House | Electro | 70er | 80er |90er"/>
    <link rel="canonical" href="http://www.hitxl.de/" />
    <meta property="og:locale" content="de_DE" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="hitXL - Internetradio | Der beste Mix aus Clubbing und Oldschool" />
    <meta property="og:description" content="Internetradio mit dem besten Mix aus Clubbing und Oldschool. Vocal-House | Dutch-House | Latin-House | Classic-House | Electro | 70er | 80er |90er" />
    <meta property="og:url" content="http:www//hitxl.de/" />
    <meta property="og:site_name" content="hitXL" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:description" content="Internetradio mit dem besten Mix aus Clubbing und Oldschool. Vocal-House | Dutch-House | Latin-House | Classic-House | Electro | 70er | 80er |90er" />
    <meta name="twitter:title" content="hitXL - Internetradio | Der beste Mix aus Clubbing und Oldschool" />

    <title>hitXL - Der beste Mix | hitXL 1 - CLUBSOUND | hitXL 2 - OLDSCHOOL</title>

    
    <script src="https://kit.fontawesome.com/017df30a84.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="http://www.hitxl.de/css/fontawesome.min.css">
    <link rel="stylesheet" type="text/css" href="http://www.hitxl.de/css/style.css">

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;700&display=swap" rel="stylesheet">

<!-- Favicon----------------------------------------->

    <link rel="shortcut icon" type="image/x-icon" href="http://www.hitxl.de/hitxl_logo.ico">
  </head>
 
  <body>

<!-- Cookies zustimmen------------------------------>

<div id="cookies">
  <div class="container">
    <div class="subcontainer">
      <div class="cookies">
        <img src="http://www.hitxl.de/images/hitxl_logo_1.png" alt="Logo"/>
        <p id="schrift_cookies">
        <b>hitXL ist und bleibt transparent für Dich!</b><br><br>

          Hallo, <b>hitXL</b> verwendet essentielle Cookies,<br>
          um ihren ordnungsgemäßen Betrieb zu gewährleisten,<br>
          ferner werden Tracking-Cookies eingesetzt,<br>
          die von Drittanbietern verwendet werden.<br>
          Damit Du die Seite besuchen kannst,<br>
          benötigen wir Deine Zustimmung. Unter<br>
          <a href="http://www.hitxl.de/cookie_datenschutz.html" target="_blank" id="link-text2"><b>IMPRESSUM &amp; DATENSCHUTZ</b></a> siehst Du,<br>
          welche Anbieter Daten von Dir<br>
          erheben und wie Du Deine Zustimmung<br>
          zur Verwendung Deiner Daten widersprechen kannst!<br>
         </p>
         <button id="cookies-btn"><b>Akzeptieren</b></button>
      </div>
    </div>
  </div>
</div>
<script src="http://www.hitxl.de/cookie.js"></script>
    
<!-- Section: Oben logo und Startbutton------------->

<div id="index_position">
  <div id="index">   
    <div id="index_logo">
      <img src="http://www.hitxl.de/images/hitxl_logo.png" alt="Logo">
    </div>   
    <h7 data-text='HITXL 1 - CLUBSOUND &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; HITXL 2 - OLDSCHOOL'>HITXL 1 - CLUBSOUND &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp; HITXL 2 - OLDSCHOOL</h7>
  </div>

  <div id="btn_index_container">
    <div class="btn_index" onclick="window.location.href='http://www.hitxl.de/hauptseite.html'">
      <span class="fa-solid fa-circle-play"></span>
    </div>
  </div>

<!-- Fußzeile: Copyright---------------------------->

<p id="java_meldung">Javascript muss aktiviert sein, damit diese Seite uneingeschränkt funktioniert - danke!</p>
<p id="index_schrift_copyright">&copy; Copyright 2014<script>new Date().getFullYear()>2010&&document.write("-"+new Date().getFullYear());</script> by <a href="#" id="link-text2"><b>hitXL</b></a> | Die Radio-Streams sind ein Angebot der <b>LAUT AG</b></p>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="http://www.hitxl.de/js/mobile-menu.js"></script>

</body>
</html>

CSS

CSS: 
.container {
  width: 420px;
  min-height: 17vh;
  top: 7%;
  left: 45.5%;
  margin: auto;
  background: #2b2b2b;
  border: #2ce1e7 solid 2px;
  border-radius: 15px;
  height: 485px;
  margin: 200px;
}
.subcontainer {
  width: 85%;
  margin: auto;
}
#cookies { 
  position: relative;
  top: 0;
  left: 26.5%;
  font-size: 10px;
  color: #2ce1e7; 
  max-width: 42.85em; 
  font-family: 'Big Shoulders Display';
  width: 100%;
  position: fixed;
  bottom: 0; 
  z-index: 10;
  display: none;
}
.cookies {
  min-height: 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1px;
  margin-top: 20px;
}
#schrift_cookies {
  font-size: 21.6px;
}
.cookies img {
  display: block;
  width: 5em;
  transform: translateZ(0);
  position: relative;
  margin: auto;
}
.cookies a {
  color: #2ce1e7;
  font-weight: 400;
  text-decoration: none;
}
#cookies-btn {
  border-radius: 7px;
  padding: 8px 12px 8px 12px;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  border: 3px solid #2ce1e7;
  background-color: #2ce1e7;
  color: #141414; 
  margin: -12px 108px 179px;
}
@media(max-width:420px) {
  .container {
    width: 100%;
  }
}
@media(max-width:1024px) {
  .cookies {
    padding: 10px 0;
  }
}

JAVASCRIPT

Javascript: 
setCookie = (cName, cValue, expDays) => {
    let date = new Date();
    date.setTime(date.getTime() + (expDays * 24 * 60 * 60 * 1000));
    const expires = "expires=" + date.toUTCString();   
    document.cookie = cName + "=" + cValue + "; " + expires + "; path=/, path=/hauptseite, path=/impressum, path=/downloads, expires=";
}

getCookie = (cName) => {
    const name = cName + "=";
    const cDecoded = decodeURIComponent(document.cookie);
    const cArr = cDecoded.split("; ");
    let value;
    cArr.forEach(val => {
        if(val.indexOf(name) === 0) value = val.substring(name.length);
    })

    return value;
}

document.querySelector("#cookies-btn").addEventListener("click", () => {
    document.querySelector("#cookies").style.display = "none";
    setCookie("cookie", true, 30);
})

cookieMessage = () => {
    if(!getCookie("cookie"))
    document.querySelector("#cookies").style.display = "block";
}

window.addEventListener("load", cookieMessage);
 
Hey Sempervivum,

das könnte es gewesen sein... denn... seit Wochen (!) funktioniert es!!!

Aber, ich bin schon recht verdutzt, weil das Script explizit auch weitere Pfade ansprechen soll, so zumindest der Autor des Scripts! Denn in seinem Video hat er es ja demonstriert.

So einfach kann die Welt sein.. dankeschön, für Deine Hilfe!!!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben