目標是在 24 小時后洗掉本地存盤專案，這意味著每天僅顯示一次模態。設定本地存盤值。但是，我的條件是檢查本地存盤專案是否不存在并且 24 小時過去了，那么顯示模式只是作業了一半。如果本地存盤值設定的時間少于 24 小時，我需要它使模式失效（不顯示）。目前，它不會洗掉本地存盤專案并且僅在加載時顯示一次模態。如果在時間范圍后重繪 頁面，本地存盤專案仍然存在。將 Sweet Alert 用于模態，但我認為這無關緊要。也不確定我是否需要一個 for 回圈或為此設定時間間隔。
為了使測驗更輕松一分鐘，您還可以使用：
expires = expires.setMinutes(expires.getMinutes() 1);
這是我嘗試過的：
$(document).ready(function() {
if (window.localStorage) {
var currentUser = '<%= current_user %>';
var swal_alert = localStorage.getItem('alert');
var currentTime = new Date($.now());
var expires = new Date();
expires = expires.setHours(expires.getHours() 24);
if (currentUser && swal_alert !=1 && currentTime < expires) {
swal ({
icon: 'warning',
text: 'Notice text here.',
closeOnClickOutside: false,
button: 'ok'
})
} else {
localStorage.removeItem('alert');
}
localStorage.setItem('alert', '1');
}
}
uj5u.com熱心網友回復：
您總是localStorage.setItem('alert', '1');在函式結束時運行。即使您的else子句運行，它也是無效的，因為您正在重新設定該欄位。
另一件需要注意的是，你的expires將永遠大于currentTime，因為你定義expires為currentTime 24 hours。new Date()只回傳當前時間。
實作您想要的一種方法是存盤最后一次顯示模態的時間戳，如果小于 24 小時，則不顯示模態，否則，顯示模態并更新時間戳。
$(document).ready(function() {
if (window.localStorage) {
const currentUser = '<%= current_user %>';
if (currentUser && shouldShowModal()) {
swal ({
icon: 'warning',
text: 'Notice text here.',
closeOnClickOutside: false,
button: 'ok'
})
localStorage.setItem('modalTimestamp', new Date().getTime());
}
}
}
function shouldShowModal() {
const lastTimestamp = localStorage.getItem("modalTimestamp")
if (!lastTimestamp) { // modal was never shown
return true
}
const parsedTimestamp = parseInt(lastTimestamp, 10) // localStorage always store values in strings
let expiryLimit = new Date(parsedTimestamp)
expiryLimit = expiryLimit.setMinutes(expiryLimit.getMinutes() 1) // or hours...
return new Date() > expiryLimit
}
我要提到的另一件事是瀏覽器不提供 API，您可以在其中“安排”代碼，例如“在 X 小時后執行此操作”。您確實具有setTimeout和setInterval功能，但只要選項卡處于活動狀態，它們就會起作用，并且不應依賴它們。
uj5u.com熱心網友回復：
您只想每天顯示一次模態。因此，您必須將該時間保留在某個地方以跟蹤自上次模態顯示以來是否已經過去了 24 小時。這是我沒有 jquery 的方法（片段無法訪問 localStorage，因此可能會遇到麻煩）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Alerts once per day</h1>
</body>
<script defer>
function alertUser() {
if (localStorage.getItem('alertTime') < new Date()) {
alert('test');
var nextAlert = new Date().setSeconds(new Date().getSeconds() 10);
localStorage.setItem('alertTime', nextAlert);
console.log('avaiable');
}
}
Window.onload = alertUser();
</script>
</html>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/493649.html
標籤：javascript jQuery 甜心提醒