Checkbox vom Browser "speichern" lassen

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

EntrigesFichtenholz

Neues Mitglied
29 Januar 2020
18
0
1
16
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!
 

EntrigesFichtenholz

Neues Mitglied
29 Januar 2020
18
0
1
16
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
 

EntrigesFichtenholz

Neues Mitglied
29 Januar 2020
18
0
1
16
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

Aaron3219

Senior HTML'ler
6 Oktober 2015
1.105
224
63
18
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.
 

EntrigesFichtenholz

Neues Mitglied
29 Januar 2020
18
0
1
16
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;}}}}
}
 

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.150
458
83
Berlin
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.
 
  • Like
Reactions: EntrigesFichtenholz

EntrigesFichtenholz

Neues Mitglied
29 Januar 2020
18
0
1
16
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
 

basti1012

Senior HTML'ler
26 November 2017
1.185
117
63
39
Minden
sebastian1012.bplaced.net
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
 

EntrigesFichtenholz

Neues Mitglied
29 Januar 2020
18
0
1
16
ÖÖööömmmmmmm. Ja unter guten browsern funktionirt das script auch von @Tronjer . Aber unter Edge und dem INTERNET EXPLORER nicht... Wäre toll wenn mir da auch noch einer helfen könnte. Danke ;)
 

basti1012

Senior HTML'ler
26 November 2017
1.185
117
63
39
Minden
sebastian1012.bplaced.net
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 ?
 

EntrigesFichtenholz

Neues Mitglied
29 Januar 2020
18
0
1
16
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:

Tronjer

Moderator
Team
Moderator
8 Oktober 2010
5.150
458
83
Berlin
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.
 

EntrigesFichtenholz

Neues Mitglied
29 Januar 2020
18
0
1
16
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>
 
Werbung:

Latest posts