I have been working on a section where particular actions took/take place based on if certain Cookies existed or not. After a lot of hassle, and with a lot of help,especially from @m_hutley, I got that working. During this process a number of people pointed out that I could better use localStorage instead of Cookies for these kinds of actions. I did take notice of that, but I wanted it to have it working first. So today I have been reading a number of articles about the advantages and disadvantages of using localStorage over Cookies and I am convinced And I now have what was working with Cookies, working with localStorage as well. There is only a supplement that I would like to have and I can not figure out how to do that.
At the moment I only check if an item is set in the following way:
if (localStorage.getItem("mailinglist_popup") === null)
$('#myModall').modal('show')
localStorage.setItem("mailinglist_popup", "seen");
So if item mailinglist_popup doesn’t exist show the modal and set the item. What I would like to have as an adjustmet though is a check to show the modal again after a certain amount of time (2 months) has expired but I can’t get my head arrount it.
Instead of setting the value to ‘seen’, set the value to the current date/time, and check the value on every page load. If it equals or is greater than two months, show the modal.
HTH,
^ _ ^
PS. I prefer switch/case over if/else, but you can use the else for checking the date set in the localStorage.
@WolfShade. I have problems with date things. Not only in JS but in PHP and MYSql as well. I have realy now idea how to set the current time/date and how after that I check if x months have past. i’m not sure if it’s dyslexia but I have alway problems with dates
var rightNow = new Date().getTime();// date/time in milliseconds - there are 5184000000 milliseconds in two months, average
switch(localStorage.getItem("mailinglist_popup") === null){
case true:
$('#myModall').modal('show')
localStorage.setItem("mailinglist_popup", rightNow);
break;
default:
var previousValue = localStorage.getItem("mailinglist_popup");
if(rightNow - previousValue > 5184000000){
$('#myModall').modal('show')
localStorage.setItem("mailinglist_popup", rightNow);
}
break;
}
I just thought of something. My code gets the date/time from the user’s computer. If you want, I can provide code that will get the date/time from the webserver.
If you want to get the webserver date/time, replace my first line of code with:
var xhr = new XMLHttpRequest();
xhr.open('HEAD',window.location.href.toString(),false);
xhr.setRequestHeader("Content-Type","text/html");
xhr.send('');
var date = xhr.getResponseHeader("Date");
date = new Date(date);
var rightNow = new Date(date.toLocaleString()).getTime();
@WolfShade I think i understand. There is one last thing which i don’t know how to solve using your switch case script. The part showing the modal again after the two months should only be activated when the user has dismissed the modal in the first place so when he dismissed the modal, the first item is set anyway. So the script should be come something like:
if (localStorage.getItem("mailinglist_popup") === null) OR (localStorage.getItem("mailinglist_popup") !== null) but timeago ??????
I’m very pedantic, so I apologize in advance. But I don’t understand the difference between the value being set upon modal display (as your original post did) and being set when the user dismisses the modal.
But (and I don’t work with modals much, so I’m counting on you already knowing how to do this), you can listen for the modal dismissal and use a callback to set the value instead of how I’ve done it.
@WolfShade Sorry for the confusion. I find it very hard to explain. In my head i know what I would like to reach, but putting it into words is another thing. Let me try again
Visitor comes to website
Mailinglist form is presented to him/her
item mailinglist_popup is set (if he/she subscribes) a second item(mailinglist_active)
is set. So after 3 months there should be a check if the item (mailinglist_popup) is set, if it is set the second check should be if the (mailinglist_active) is set, if that is not the case and 3 months has passed show the mailinglist popup again.
var rightNow = new Date().getTime();// date/time in milliseconds - there are 5184000000 milliseconds in two months, average
switch(localStorage.getItem("mailinglist_popup") === null){
case true:
localStorage.setItem("mailinglist_popup", rightNow);
switch(confirm("Would you like to subscribe?")){
case true:
// do something
localStorage.setItem("mailinglist_active", "Y");
break;
case false:
// don't do something
localStorage.setItem("mailinglist_active", "N");
break;
}
break;
default:
var previousValue = localStorage.getItem("mailinglist_popup");
if(rightNow - previousValue > 5184000000){
localStorage.setItem("mailinglist_popup", rightNow);
switch(confirm("Would you like to subscribe?")){
case true:
// do something
localStorage.setItem("mailinglist_active", "Y");
break;
case false:
// don't do something
localStorage.setItem("mailinglist_active", "N");
break;
}
}
break;
}
V/r,
^ _ ^
I used confirm() because I don’t have $(‘#modall’).
If the user is not subscribed and mailinglist_popup is not set, we have Number(null) === 0, and that is never greater than Date.now() and the popup never gets shown. So you do need to check if mailinglist_popup is set first.