Showing and hiding items based on cookie value
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.
$(document).ready(function(){
XT1
});
</script>
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>
$(document).ready(function() {
XT1
});
</script>
