title: Simple Cookie Consent - How to assess if the user has already clicked and consented
body: <p>I have been told to add a cookie to a site. The site doesn't retain any user information other than the amount of visits the site gets.</p>
  
  <p>I therefore do not have any user data to assign the cookie to so cannot tell if the user has already accepted.</p>
  
  <p>Keeping the answer as quick to implement as possible and using simple code is it possible to only show the cookie to users that haven't already acknowledged it?</p>
  
  <p>Heres where I am at. 'a basic cookie policy that will show on every page load'. Please help me make it only show once per user.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> $(document).ready(function(){
    if(getCookie("HideCookie") != "true") {
     $("#cookie-consent").css('display','block');
    }
   });
  
   function SetCookieAndHideDiv(){
    setCookie('HideCookie','true',1);
    $("#cookie-consent").css('display','none');
   }
  
   function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
  
    for(var i=0; i&lt;ca.length; i++) {
     var c = ca[i];
     while (c.charAt(0)==' ') c = c.substring(1);
     if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
  
    return "";
   }
  
   function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
   }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> /* COOKIE */
   #cookie-consent {
          display: none;
  
    width:100%;
    height: 100%;
  
    position:fixed;
    bottom:0px;
  
    background-color: rgba(0,0,0,0.8);
  
    z-index: 100000;
   }
  
    .cookie-consent-inner {
     width:100%;
  
     padding: 20px;
  
     position:fixed;
     bottom:0px;
  
     background-color: rgba(0,74,119,1);
     color: rgba(255,209,0,1);
    }
  
     .cookie {
      width: 100%;
      max-width: 1248px;
      margin: 0 auto;
  
      display: -webkit-flex;
      -webkit-flex-wrap: wrap;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
     }
  
      .cookie-msg {
       width: calc(100% - 120px);
       margin-right: 20px;
       float: left;
      }
      .cookie-accept {
       width: 100px;
       float: right;
      }
       .cookie-button {
        font-size: 16px;
        line-height: 40px;
        padding: 0px;
        color: #FFD100;
        width: 100px;
        background-color: #337ab7;
        cursor: pointer;
        border: 1px solid white!important;
        -o-transition: all 0.4s linear;
        -moz-transition: all 0.4s linear;
        -ms-transition: all 0.4s linear;
        -webkit-transition: all 0.4s linear;
        transition: all 0.4s linear;
        text-align: center;
       }
        .cookie-button:hover {
         background-color: #0072AE;
        }
   /* END COOKIE */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;section id="cookie-consent" class="cookie-consent"&gt;
   &lt;div class="cookie-consent-inner"&gt;
    &lt;div class="cookie"&gt;
  
     &lt;div class="cookie-msg"&gt;We use cookies to track visits to our website, we store no personal details. By staying on the site you consent to our cookie policy.&lt;/div&gt;
     &lt;div class="cookie-accept"&gt;
      &lt;button id="cookie" class="cookie-button" onclick='SetCookieAndHideDiv();'&gt;OK&lt;/button&gt;
     &lt;/div&gt;
     
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I know this is very basic, but it has basic needs.</p>