How to display a popup only once per day vue

Question

I have a method that shows a modal window 4 seconds after the user logs on to the site. If it is closed then show again next 24 hours. I have some problems. LocalStorage does not store my data and does not return a variable that stores the date, how can I fix it?

mounted () {
    this.runModalTimer()
    this.setDevHoursModal()
  },
  methods: {
    runModalTimer (): void {
      setTimeout(() => {
        this.isModalVisible = true
      }, 4000)
    },
    setDevHoursModal (): boolean {
      if (localStorage) {
        let nextPopup = localStorage.getItem('isModalVisible')

        if (nextPopup > new Date()) {
          return this.isModalVisible = true
        }

        let expires = new Date()
        expires = expires.setHours(expires.getHours() + 24)

        localStorage.setItem('isModalVisible', expires)
      }
    }
  }

Answer 1

In your setDevHoursModal method, you're not always returning a value. You could resolve this by just returning the result of the condition:

setDevHoursModal(): boolean {
  if (localStorage) {
    let nextPopup = localStorage.getItem('isModalVisible');
    if (nextPopup > new Date()) {
      return (this.isModalVisible = true);  // let's be a little more explicit here
    }

    let expires = new Date();
    expires = expires.setHours(expires.getHours() + 24);

    localStorage.setItem('isModalVisible', expires);
    return false;
  }
  return true;
}