localStorage with timestamp instead of Cookies

donboe · 2018-09-07 15:10:17 UTC

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.

I would be very thankful for any advise

WolfShade · 2018-09-07 15:28:16 UTC

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.

donboe · 2018-09-07 15:39:32 UTC

@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

WolfShade · 2018-09-07 15:49:39 UTC

Gimme a minute… I’ll write some code in DW and post it, here.

V/r,

^ _ ^

WolfShade · 2018-09-07 15:57:51 UTC

Okay… this hasn’t been tested, but…

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;
	}

V/r,

^ _ ^

WolfShade · 2018-09-07 16:13:17 UTC

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.

V/r,

^ _ ^

WolfShade · 2018-09-07 16:37:11 UTC

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();

V/r,

^ _ ^

donboe · 2018-09-07 16:38:05 UTC

@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 ??????

Sorry for the confusion. I hope you understand

WolfShade · 2018-09-07 16:41:22 UTC

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.

HTH,

^ _ ^

donboe · 2018-09-07 16:45:58 UTC

@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.

I don’t know how to make myself clearer

WolfShade · 2018-09-07 18:50:57 UTC

Something like:

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’).

WolfShade · 2018-09-07 18:53:54 UTC

I kind of get what you want to do, but don’t have the time to go through all the logic. The above should get you going in the right direction.

HTH,

^ _ ^

donboe · 2018-09-07 19:11:34 UTC

@WolfShade. Going to give it a try. I hope I can ask another question if I not can make it to work. Thank you for the patience

m3g4p0p · 2018-09-07 19:12:55 UTC

So in pseudo code that would be

if (mailinglist_popup is not set) or (
  (mailinglist_active is not set) and 
  (three months have passed)
)

? This should do the trick then:

var mailinglistPopup = localStorage.getItem('mailinglist_popup')
var mailinglistActive = localStorage.getItem('mailinglist_active')
var now = Date.now()
var threeMonths = 1000 * 60 * 60 * 24 * 90

if (mailinglistPopup === null || (
  mailinglistActive === null &&
  Number(mailinglistPopup) > now
)) {
  $('#myModall').modal('show')
  localStorage.setItem('mailinglist_popup', now + threeMonths)
}

donboe · 2018-09-07 19:21:07 UTC

@m3g4p0p. Except for the first part you’re right . mailinglist_popup is allways set, no mather if the dismiss the form or submit it

WolfShade · 2018-09-07 19:23:42 UTC

Certainly.

V/r,

^ _ ^

m3g4p0p · 2018-09-07 19:25:42 UTC

Except for when the use first visits the page and has neither subscribed nor dismissed the popup yet… also, your words:

:-)

PS: But thinking about it, I guess the mailinglist_active check would indeed suffice… so just omit that bit.

donboe · 2018-09-07 19:32:51 UTC

mailinglist_active is set when they confirm the subscription by clicking on a link in a confirmation e-mail

donboe · 2018-09-07 19:36:03 UTC

I think i got you. I only need to get my head arround it

m3g4p0p · 2018-09-07 19:41:11 UTC

Ahh I’m getting confused now to. ^^ I withdraw my last comment, the check is necessary. Consider

if (
  mailinglistActive === null &&
  Number(mailinglistPopup) > Date.now()
) {/* ... */}

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.