Article

Showing and hiding items based on cookie value

https://cdn.jsdelivr.net/npm/[email protected]/dist/js.cookie.min.js
Copy to clipboard

One way that cookies become handy is when a developer wants to show/hide elements from a webpage.

For example, if a user has logged in to a page and a cookie containing his name has been stored we can then to choose to hide the login form and show a welcome message instead.

Refreshing this page will not change the data of the cookie thus, the page will "remember" that the user was logged in. Here is the code: https://raw.githubusercontent.com/finsweet/jqueryCourse/main/cookies/ex18.js?actionable=true We can set the cookie by submitting the form.

<script>
$(document).ready(function(){
  XT1
});
</script>
Copy to clipboard
Send to Live Demo

Live demo

<div id="minidivpage" class="example-live"><h4 class="heading-4">Login:</h4><div class="w-form"><form id="email-form" name="email-form" data-name="Email Form" method="get" aria-label="Email Form"><input type="text" class="w-input" maxlength="256" name="name-2" data-name="Name 2" placeholder="username" id="name-2"><input type="submit" value="Submit" data-wait="Please wait..." class="w-button"></form><div class="w-form-done" tabindex="-1" role="region" aria-label="Email Form success"><div>Thank you! Your submission has been received!</div></div><div class="w-form-fail" tabindex="-1" role="region" aria-label="Email Form failure"><div>Oops! Something went wrong while submitting the form.</div></div></div><h1 class="welcome">Welcome back!</h1></div>

<script>    
$(document).ready(function() {
  XT1
});
</script>
<script>
  
</script>
Copy to clipboard
Press the Run Demo button to execute the scripts above.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Your browser is too small

Resize your browser to be at least 769px wide.