To achieve this functionality, you can use JavaScript and cookies. Here’s a basic example of how you can implement it:
- Display the success message and set a cookie when the user logs in.
- Check for the presence of the cookie on page load. If the cookie exists, hide the message.
Here’s the code:
htmlhtml>
<html>
<head>
<title>Login Pagetitle>
<style>
/* CSS for the alert message */
.alert {
padding: 20px;
background-color: #f2f2f2;
color: green;
display: none; /* Initially hide the message */
position: fixed;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
style>
head>
<body>
<div class="alert" id="alertMessage">
<strong>Success!strong> Login successful!
div>
<script>
// Function to set a cookie
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
// Function to get a cookie by name
function getCookie(name) {
var nameEQ = name + "=";
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
while (cookie.charAt(0) === ' ') {
cookie = cookie.substring(1, cookie.length);
}
if (cookie.indexOf(nameEQ) === 0) {
return cookie.substring(nameEQ.length, cookie.length);
}
}
return null;
}
// Function to show the alert message
function showAlert() {
var alertMessage = document.getElementById('alertMessage');
alertMessage.style.display = 'block';
setTimeout(function () {
alertMessage.style.display = 'none';
}, 5000); // Hide after 5 seconds
}
// Check if the cookie exists
var hasLoggedInCookie = getCookie('hasLoggedIn');
if (!hasLoggedInCookie) {
// Set the cookie and show the alert message
setCookie('hasLoggedIn', true, 1); // Expires in 1 day
showAlert();
}
script>
body>
html>
In this example, the success message is initially hidden (display: none;). When the user logs in, the showAlert function is called, which displays the message for 5 seconds and then hides it. A cookie named hasLoggedIn is set to prevent the message from showing again on page refresh. The cookie expires in 1 day, so if the user logs out and logs in again the next day, the message will be displayed again.
المزيد من المعلومات
لتحقيق هذا السلوك، يمكنك استخدام JavaScript للتحكم في عرض وإخفاء الرسالة واستخدام الكوكيز لتتبع حالة عرض الرسالة بعد تحميل الصفحة. فيما يلي الخطوات التفصيلية لتنفيذ هذا السلوك:
- قم بعرض رسالة النجاح عند تسجيل الدخول وقم بتعيين كوكي عند عرض الرسالة.
- قم بفحص وجود الكوكي عند تحميل الصفحة. إذا كان الكوكي موجودًا، فأخفِ الرسالة.
هنا الشيفرة:
htmlhtml>
<html>
<head>
<title>Login Pagetitle>
<style>
/* CSS for the alert message */
.alert {
padding: 20px;
background-color: #f2f2f2;
color: green;
display: none; /* Initially hide the message */
position: fixed;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
style>
head>
<body>
<div class="alert" id="alertMessage">
<strong>Success!strong> Login successful!
div>
<script>
// Function to set a cookie
function setCookie(name, value, days) {
var expires = "";
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + value + expires + "; path=/";
}
// Function to get a cookie by name
function getCookie(name) {
var nameEQ = name + "=";
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
while (cookie.charAt(0) === ' ') {
cookie = cookie.substring(1, cookie.length);
}
if (cookie.indexOf(nameEQ) === 0) {
return cookie.substring(nameEQ.length, cookie.length);
}
}
return null;
}
// Function to show the alert message
function showAlert() {
var alertMessage = document.getElementById('alertMessage');
alertMessage.style.display = 'block';
setTimeout(function () {
alertMessage.style.display = 'none';
}, 5000); // Hide after 5 seconds
}
// Check if the cookie exists
var hasLoggedInCookie = getCookie('hasLoggedIn');
if (!hasLoggedInCookie) {
// Set the cookie and show the alert message
setCookie('hasLoggedIn', true, 1); // Expires in 1 day
showAlert();
}
script>
body>
html>
في هذا المثال، يتم إخفاء رسالة النجاح في البداية (display: none;). عند تسجيل الدخول، يتم استدعاء الدالة showAlert التي تعرض الرسالة لمدة 5 ثواني ثم تخفيها. يتم تعيين كوكي بإسم hasLoggedIn لمنع عرض الرسالة مرة أخرى عند تحميل الصفحة. ينتهي صلاحية الكوكي في يوم واحد، لذلك إذا قام المستخدم بتسجيل الخروج وتسجيل الدخول مرة أخرى في اليوم التالي، ستعرض الرسالة مرة أخرى.
