1

I have been assigned to display to the user the number of days since their last visit to my website and have to use the "localStorage" web api. I believe I have a good start, and I know that I will need to access and store the last visit date and get the difference between the current date of their visit. I am just unsure of how to access the date of their last visit.

Here is my code:

HTML:

<article>Days since your last visit:<span class="timeBetween"></span></article>

The class name of the span I want to display to is "timeBetween"

JavaScript:

const visitsDisplay = document.querySelector('.timeBetween');

let numVisits = Number(window.localStorage.getItem("timeBetween"));

//This is where I believe I need to get the days between visits
//Something like:

const visitDifference = "pastvisit" - Date.now();

localStorage.setItem("timeBetween", visitDifference);
trincot
  • 317,000
  • 35
  • 244
  • 286
Blossompot
  • 21
  • 5
  • What do you expect `numVisits` to have as value? A Number? What would that number represent? Secondly, if you don't have code that **writes** something to local storage, there will be nothing to **read**. – trincot Feb 23 '23 at 10:31
  • I believe using the Number() function ensures that if the storage item does not exist, it will be converted into a zero (0) which would help with an if block condition if the user had never visited the site before. – Blossompot Feb 23 '23 at 10:33
  • Did you test that belief? Have you checked what `getItem` returns when the entry does not exist in local storage? Have you tried to apply `Number` to that? Was it zero? – trincot Feb 23 '23 at 10:34
  • I think you taking the wrong approach. As I understand you want to calculate the difference between the last visit and the current visit. As such you should not have a number in local storage but a timestamp in ISO 8601 format. – tacoshy Feb 23 '23 at 10:35
  • 1
    Storing the difference is pointless. Yes, the difference between my last (1) and my current visit (2) might be x seconds. But that info doesn't help you for my _next_ visit (3) - because you won't be able to tell how far apart (3) and (2) were. You need to store the _timestamp_ of my last visit, not any differences. – CBroe Feb 23 '23 at 10:36

3 Answers3

1

I think the flow should be like below:

if(localStorage.getItem("lastVisited")==null){
    // consider first visit
    localStorage.setItem(new Date()) // your choice of format
}
else{
    const lastVisited = localStorage.getItem("lastVisited")
    // your logic to calculate days based on format stored.
    localStorage.setItem(new Date()) // current visit for future calculation
}
Piyush Goyani
  • 66
  • 1
  • 9
1

you should save the current Time when user opens your site every time

localStorage.setItem("lastVesitedTime", JSON.stringify(new Date()));

and where you are displaying the difference of last visited time and current time

var time = localStorage.getItem("lastVesitedTime");
var lastVisitedTime = JSON.parse(time);
var now =new Date();
var diffDays =now.getDate() - lastVisitedTime.getDate(); 
const visitsDisplay = document.querySelector('.timeBetween');
visitedDisplay.innerText=diffDays + " days"
NAZIR HUSSAIN
  • 578
  • 1
  • 18
1

Since you want to calculate the number of days between the visitor's last visit, you could use something like this (could be polished and improved, but it works)

<article>Days since your last visit: <span class="daysSinceLastVisit"></span></article>

// Somewhere else in your code base set the last visit in localStorage
localStorage.setItem('lastVisit', '2023-02-22');

displayDaysSinceLastVisit();

function displayDaysSinceLastVisit() {
  const visitsDisplay = document.querySelector('.daysSinceLastVisit');

  const lastVisit = localStorage.getItem('lastVisit');

  if (!lastVisit) {
    visitsDisplay.innerText = 'This is your first visit';
    
    return;
  }

  const lastVisitDate = Date.parse(lastVisit);
  
  if (!lastVisitDate) {
    // Stored date is not a valid format
    return;
  }

  const currentDate = new Date();

  const difference = currentDate - lastVisitDate;
  const differenceInDays = Math.floor(difference / (1000 * 60 * 60 * 24));

  visitsDisplay.innerText = differenceInDays;
}
simplism
  • 78
  • 6