So I want to have a condition in displaying the modal. The condition is that the modal will appear if the day is not more than 90 days, the user has logged in, and checks whether the modal has ever appeared or not.
emailName
I got it from the logged in user's email, it's dynamic. So, if emailName === ''
user is not logged in.
I have an example. logged in for the first time, then the modal will appear. When logged in back, the modal does not appear.
When logged in, the modal will appear. But when logged in back, the modal doesn't appear.
The problem I'm facing is, in one device, is logged in and modal appears. When has logged out and logged in back, the modal does not appear. Likewise if is logged in. But, when I try to login again with , the modal appears, it shouldn't happen. The problem is because in localStorage
, the value of has been replaced with .
How to solve this? is it necessary to use an array to hold all the emails that have been logged in? and how to implement it?
const startDate = new Date('8/13/2021');
const endDate = new Date();
const diffTime = Math.abs(endDate - startDate);
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
const emailName = '@if(!isNull(tctx.getActor().getEmail())){@tctx.getActor().getEmail()}';
console.log(endDate)
console.log(diffTime)
console.log(diffDays + " days");
if(diffDays <= 90 && emailName !== ''){
console.log('below 3 month, logged')
const popupShow = localStorage.getItem('popupShow');
const emailLogged = localStorage.getItem('emailVal')
if(!popupShow || emailLogged !== emailName){
localStorage.setItem('popupShow', true);
localStorage.setItem('emailVal' , emailName)
$('#staticBackdrop').modal('show')
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Understood</button>
</div>
</div>
</div>
</div>
window.onload = function() {
(function() {
const startDate = new Date('7/13/2021');
const currentDate = new Date();
const diffTime = Math.abs(currentDate - startDate);
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
const emailName = '@if(!isNull(tctx.getActor().getEmail())){@tctx.getActor().getEmail()}';
if(diffDays <= 90 && emailName !== ''){
const emailLogged = localStorage.getItem('emailLogged');
if(emailLogged === null){
localStorage.setItem('emailLogged', '[]')
}
const oldEmailLogged = JSON.parse(localStorage.getItem('emailLogged'))
const arraySameValue = oldEmailLogged || [];
if(arraySameValue.indexOf(emailName) == -1){
arraySameValue.push(emailName)
const stringRepresentingArray = JSON.stringify(arraySameValue);
window.localStorage.setItem("emailLogged", stringRepresentingArray);
$('#staticBackdrop').modal('show');
}
}
})();
};
