In modern web development, cookies play a crucial role in storing information on the client-side. One common use case is to display notifications or alerts to users on subsequent visits to a website. By leveraging cookies, we can easily track a user’s preferences and display personalized messages.

In this tutorial, we will explore how to implement cookie-based notifications and alerts using JavaScript.

Step 1: Setting up the HTML

Start by creating a simple HTML structure for displaying the notifications. You can use a <div> element with a unique ID to represent each notification. For example:

<div id="notification"></div>

Step 2: Writing the JavaScript code

Now, let’s write the JavaScript code to handle the cookie-based notifications. We will use the document.cookie property to read and write cookies. The logic will involve checking if a specific cookie exists and display the corresponding notification message.

// Read the cookie value
function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (let cookie of cookies) {
    const [cookieName, cookieValue] = cookie.split("=");
    if (cookieName === name) {
      return decodeURIComponent(cookieValue);
    }
  }
  return null;
}

// Display notification based on the cookie value
function displayNotification() {
  const notificationDiv = document.getElementById("notification");
  const notificationCookie = getCookie("notification");
  
  if (notificationCookie === "1") {
    notificationDiv.innerText = "Welcome back! We have a special offer for you.";
  } else if (notificationCookie === "2") {
    notificationDiv.innerText = "Thank you for being a loyal customer. Enjoy free shipping on your next order.";
  }
}

// Check if the notification cookie exists and display notification
displayNotification();

Step 3: Setting and updating the cookie

To set and update the notification cookie, you can create a function that allows the user to dismiss or choose different notifications. Here’s an example of a function that sets the cookie value based on a user’s choice:

// Set the cookie value based on user choice
function setNotificationCookie(value) {
  document.cookie = `notification=${value}; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/`;
}

To update the cookie value, you can call the setNotificationCookie() function when the user selects a different notification. For example:

// User selects notification option 1
setNotificationCookie("1");

// User selects notification option 2
setNotificationCookie("2");

Step 4: Styling the notifications

Lastly, you can style the notification div using CSS to make it visually appealing. Here’s an example:

#notification {
  background-color: #fafafa;
  padding: 10px;
  border: 1px solid #ddd;
}

And that’s it! You have successfully implemented cookie-based notifications and alerts using JavaScript. By leveraging cookies, you can provide a personalized user experience and engage visitors on subsequent visits to your website.

#JavaScript #Cookies