In this article, we will learn how to store cookies using a cookie consent feature, utilizing HTML, CSS, and JavaScript.
Cookies are small pieces of data stored on a user’s device during their visit to a website. They are used to store information, which helps in loading data more quickly and improving the overall user experience. Cookies also play a role in managing user sessions, allowing users to stay logged in as they navigate through different pages on the same site.
To check where cookies are stored, follow these steps:
- Right-click on the page and select the “Inspect” option from the menu.
- Navigate to the “Application” tab.
- In the “Storage” section, click on “Cookies.”
- Open the “Cookies” section to view all the cookies stored by the site.
Preview:
You can also manage the cookies here, such as editing, deleting, or storing them.
This is a simple implementation of a modal pop-up that informs users about cookies and tracks whether they have dismissed it. It uses HTML, CSS, and JavaScript. The modal is displayed when a button is clicked, and once the user dismisses it, a cookie is set to remember their action, preventing the modal from showing again on subsequent visits.
Step 1: index.html (Structure of the Page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./index.css" rel="stylesheet">
<title>Cookies Modal Pop Up</title>
</head>
<body>
<h2>Cookies Modal Pop Up</h2>
<button class="myBtn">Click Open To Modal</button>
<div class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>This websites uses cookies to ensure you get the best experience on the websites.</p>
<a href="https://www.office.com/?auth=2" class="modal-content-link">Learn More</a>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
This code provides the structure of the modal pop-up. It contains a button (Click Open To Modal) that opens the modal, which informs the user about cookies. The modal includes a close button (×) to close it.
Step 2: index.js (JavaScript Logic)
let modal = document.querySelector(".modal");
let clear = document.querySelector(".close");
let btn = document.querySelector(".myBtn");
function checkCookie() {
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
if (cookie.indexOf("dismissed=") === 0) {
return true;
}
}
}
function setCookie() {
document.cookie = "dismissed=true;";
}
btn.addEventListener('click', function () {
if (!checkCookie()) {
modal.style.display = "block";
}
});
clear.addEventListener('click', function () {
modal.style.display = "none";
setCookie();
});
Below is the explanation of the index.js code provided above:
Selectors:
- modal: Selects the modal element that displays the cookie warning.
- clear: Selects the close button that hides the modal.
- btn: Selects the button that activates the modal to open.
Functions:
- checkCookie(): This function checks if the user has already dismissed the modal by looking for a cookie named dismissed. If this cookie is found, it returns true, meaning the modal won’t display again.
- setCookie(): This function sets a cookie named dismissed with a value of true when the user closes the modal. This ensures that the modal will not appear again on the user’s next visit.
Event Listeners:
- addEventListener(‘click’, …): When the button is clicked, it checks if the dismissed cookie exists. If not, the modal will be displayed.
- addEventListener(‘click’, …): When the user clicks the close button (×), the modal is hidden, and the dismissed cookie is set, ensuring the modal doesn’t show again during future visits.
Step 3: index.css (Styling the Page with CSS)
In the index.css file, you can customize the styles of elements to suit your preferences.
Output:
When a user visits the site for the first time and clicks the ‘Open Modal’ button, the following output will be displayed:
As you can see above, the modal has appeared. Now, close the modal, and the output below will be displayed:
After closing the modal, a cookie is stored to remember your preference.
Conclusion:
This code provides a simple solution for displaying a cookie notice using a modal pop-up. A modal is a small window that appears on top of the webpage content, typically for notifications or alerts. In this case, it informs users about the website’s use of cookies. By setting a dismissed=true cookie when the user closes the modal, the website remembers the user’s preference, preventing the modal from appearing on subsequent visits. This method helps comply with cookie consent regulations while enhancing the user experience by not showing the notice repeatedly once dismissed.
Source: Read MoreÂ
