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

Checkbox vom Browser "speichern" lassen

Hallo.
Ich habe folgendes Problem ...
Es ist so, dass ich eine website erstellt habe und man mus ja dort auch auf cookies hinweisen.
Nun besteht diese website aus mehreren Seiten.
Meine Frage: wie kann ich es machen das der Browser sich den Harken merkt auch wenn ich auf die andere seite von der website klicke b.Z reloade?
Ist eigendlich nur so ein code wie ich ihn hier rein kopiert habe. Natürlich führt die box aus das die Cookie abfrage verschwindet.

<html>

<body>
<input type="checkbox" name="checkBoxName" oneclick="Cookies()" />
</body>

</html>

;)
Gruẞ Johannes!
 
Werbung:
Hmmmm ... ja schön und gut .
Aber ich komme leider nicht weiter.. Da ich auch nicht so javascript bewandert bin.
Könntest du mir einen "Anstupser" geben wie ich eine einzige checkbox als cookie speichern kann und die dann auch beim laden der webside ausgeführt wird?..

Danke für die antwort im vorraus
 
Werbung:
Willst du so einen Cookie Banner selber erstellen ?
Es gibt genug Anbieter die den fertigen Code bereitstellen.
Wenn du es selber bauen willst dann helfen wir auch dabei.
 
Vielen Dank für die Hilfe basti1012
ich habe aber schon einen erstellt ;)
Und ich muss einfach nur es so haben das der banner wenn man auf zustimmen geklickt hat auf der und auf den darauf folgenden Seiten nichtmehr angezeigt wird .

Hier ein kleiner Ausschnitt ;)
Und da ich ein bisschen neu auf dem Gebiet bin verzeiht mir die Unordnung.
LG Johannes.
 

Anhänge

  • cookie banner.zip
    1,3 KB · Aufrufe: 5
Werbung:
Ich glaube kaum, dass jemand sich eine Zip-Datei downloaded, um dir zu helfen.
 
Ich glaube, er kommt ein wenig aggressiv rüber, ist aber angebracht.

Zip-Dateien von fremden Quellen herunterzuladen ist eine sehr unsichere Angelegenheit. Es macht also mehr Sinn, denn Code in anderer Form bereitzustellen.
 
Werbung:
Ok..

Index;
<!DOCTYPE html>
<html lang="de" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Cookiefenster.css">
<title></title>
</head>

<script>function CookiesCheck() {var checkBox = document.getElementById("CookieCheck");var text = document.getElementById("CookiesCheck");if (checkBox.checked == true){text.style.display = "none";} else {text.style.display = "block";}}</script>
<div id="All">
<div id="CookiesCheck" style="display:show">
<div id="Cookieanimation">
<div class="Cookiebackfenster"></div>
<div class="Cookiefenster">
<p class="CookieHeader">Cookies Hmmm... Lecker!</p>
<ol class="cookiemenu">
<strong><a href="Impressum.html">Impressum</a></strong><div class="CookiesideHidden"><input type="checkbox" id="CookieCheck" onclick="CookiesCheck()">Zur Kenntnis Genommen</div>
</ol>
<div class="Cookies">
<img src="img/Cookies.jpg" alt="Cookie Bild">
</div>
</div>
</div>
</div>
<body>

</body>
</html>


stylecss;

.CookiesideHidden{margin-top:30px; margin-bottom:5px;position: absolute;font-size:20px;}
.CookieButton{color:red;margin-left:0;text-align: center;border-color:red;}
.Cookiebackfenster{width: 100%; height: 100%;position: absolute;
z-index: 9;
background-color: white;
opacity: 0.6;
float: right;}
.CookieHeader{color:#fff;font-size:30px;margin-top:-55px;text-decoration: underline;text-align: center;}
.cookiemenu{margin-top:80px;margin-bottom:5px;margin-left:50px;}
.Cookiefenster{
position: absolute;
width: 500px;
height: 50px;
background-color: white;
margin-top: 0;
margin-left: 33.33%;
background: linear-gradient(160deg, #4682b4, #333d40);
background-size: 400% 400%;
animation: Backanimation 18s ease ;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0,8);
z-index: 99999;
background-color: #fff;
padding: 70px;
border-radius: 3px;
animation: drop 4.5s forwards ease;
box-shadow: 5px 5px 5px;
}
a {cursor: pointer;}
.cookiemenu a{text-decoration:underline; font-size:20px;position: absolute; margin: 0;color:#fff;}
.cookiemenu a:hover{transform: scale(1.1);-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-0-transform: scale(1.1);box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);color: black;}
.Cookies img{float:right;position:relative;width: 15%;height:15%; margin:5px;}


@keyframes drop{0%{}30%{transform: translateY(350px);opacity:0.7;}50%{transform:translateY(300px);opacity:0.5; }100%{transform: translateY(350px);opacity:0.8;}}}}
}
 
So geht das:
Code:
<div id="cookies">
  <div id="CookiesCheck">
    <div id="Cookieanimation">
      <div class="Cookiebackfenster"></div>
      <div class="Cookiefenster">
        <p class="CookieHeader">Cookies Hmmm... Lecker!</p>
        <ol class="cookiemenu">
          <strong><a href="Impressum.html">Impressum</a></strong>
          <div class="CookiesideHidden"><input type="checkbox" id="CookieCheck" onclick="cookiesCheck()">Zur Kenntnis
            Genommen
          </div>
        </ol>
        <div class="Cookies">
          <img src="img/Cookies.jpg" alt="Cookie Bild">
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  const elem = document.querySelector('#cookies');

  const cookiesCheck = () => {
    localStorage.setItem('consented', 'yes');
    elem.parentNode.removeChild(elem);
  };

  if (localStorage.getItem('consented')) {
    elem.parentNode.removeChild(elem);
  }
</script>

Und gewöhne dir an, IDs, Klassen und Funktionen klein zu schreiben.
 
Werbung:
Hallo ..
Da bin ich wieder habe jetzt mir eine art Lösung ausgedacht und sie könnte auch funktioniren.
Da man ja bei der checkbox im code einfach checked schreiben kann und dies ja bei reload noch da ist...
Könnte man doch einfach beim java code eine aktualisirungs abfrage machen ..Oder ?
Javascript:
function cookiescheck() {var checkbox = document.getElementById("cookiecheck");var text = document.getElementById("cookiescheck");if (checkbox.checked == true){text.style.display = "none";} else {text.style.display = "block";}}
Gruẞ Johannes
 
Hee.
Warum willst du das aktualisieren ?
Wenn ich auf einer Webseite gehe und die Boxen anklicken tue ,
will ich nicht das die Seite ein reload macht.
Wozu auch.?
Wenn man dann weiter rum surfen tut und sowieso einen Link anklicken tut hat man einen reload und wenn man alles richtig gemacht hat sollte der Banner nicht wieder kommen.

Also meine Frage.
Warum reloaden ?
Warum sollte einer im html Code checked reinfummeln ? Das ist ein Cookiebanner, da fummelt wohl keiner dran rum.
Warum andere Lösung ?
@Tronjer hat dir doch einen fertigen Code gepostet.

Ein wennig Css dazu und JIPI , es läuft und sieht sogar schön aus
 
Werbung:
edge und IE haben sowieso immer ihre eigene macken.
Da mußt du jetzt mal kucken weil ich die Browser nicht nutze.

Wird der Wert der von localStorage gesetzt wird gespeichert ?
Das kann man in der Console nach kucken.
Werden andere Fehler in der Console angezeigt ?
 
Screenshot (25).png

Hmmm.. ja er gibt ein paar an....
Der IE garnicht
Und der Wert wird auch nicht gespeichert.

Wenn ich dann auf den fehler (link) gehe wirft er mich beim script raus

Anscheinend mag er das hier nicht localStorage.setItem('consented', 'yes')

Und ich glaube ich habe das Problem gefunden :SCRIPT5009: "cookiesCheck" ist undefiniert;
Die Frage ist jetzt wie ich es Definiere..

Javascript:
  <script>
    const elem = document.querySelector('#cookies');

    const cookiesCheck = () => {
      localStorage.setItem('consented', 'yes');
      elem.parentNode.removeChild(elem);
    };

    if (localStorage.getItem('consented')) {
      elem.parentNode.removeChild(elem);
    }
  </script>
 
Zuletzt bearbeitet:
Das Problem für den IE dürfte die Arrow Function sein. Ersetze das durch die alte Syntax mit function() und dazu das const durch var.
 
Werbung:
Meinst du das so?
Javascript:
  <script>
    const elem = document.querySelector('#cookies');

    var cookiesCheck function()  {
      localStorage.setItem('consented', 'yes');
      elem.parentNode.removeChild(elem);
    };

    if (localStorage.getItem('consented')) {
      elem.parentNode.removeChild(elem);
    }
  </script>
 
Zurück
Oben