How can I ensure that a pop-up is shown only once per day in Vue.js

I am facing an issue with a method that is supposed to display a modal window 4 seconds after the user logs onto the website. If the modal is closed, it should not be displayed again for the next 24 hours. However, I am encountering problems with LocalStorage not storing the data and not returning the variable that holds the date. How can I resolve this issue?

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

Your setDevHoursModal method may not always return a value as expected. To ensure consistency, you can simply return the result of the condition check within the method:

setDevHoursModal(): boolean {
  if (localStorage) {
    let nextPopup = localStorage.getItem('isModalVisible');
    if (nextPopup > new Date()) {
      return (this.isModalVisible = true);  // It is clearer to explicitly return true in this case
    }

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Integrating a search box with radio buttons in an HTML table

I am currently working on a project that involves jQuery and a table with radio buttons. Each button has different functionalities: console.clear(); function inputSelected(val) { $("#result").html(function() { var str = ''; ...

Guidelines for creating a binary release of Node.js with native modules

Currently, I am in the midst of exploring the world of Node.js projects, delving into different bundlers and various other components. One interesting concept that came to mind is the idea of bundling Node.js into a single binary for Linux, macOS, or Windo ...

The process of creating a project with Vue-cli has suddenly come

Whenever I attempt to create a project using vue-cli, it gets stuck at this point: >> vue init webpack test ? Project name test ? Project description (A Vue.js project) I can't even cancel it with ctl + c or any other command. Pressing enter ...

Timeout set to run indefinitely

Looking at the code snippet below, it seems to be running at a frame rate of 60 frames per second. If any button is clicked, the variable isjump will be set to true and the following code will start executing. The goal here is to exit the jump() function a ...

Unable to open file downloaded from Laravel with Vue.js support

I am facing an issue with my function in Laravel and vue.js. Even though it successfully downloads the desired file, when I try to open it, I consistently receive an error message stating that the file type is unsupported. Below is the vue.js function I a ...

When utilizing a personalized Typescript Declaration File, encountering the error message 'Unable to resolve symbol (...)'

I'm having trouble creating a custom TypeScript declaration file for my JavaScript library. Here is a simplified version of the code: App.ts: /// <reference path="types.d.ts" /> MyMethods.doSomething() // error: Cannot resolve symbol "MyMetho ...

Error Message: Module not found while using Node Express with TypeScriptIssue: A

I have set up a straightforward node express app using TypeScript. My goal is to implement an errorMiddleware in the index.ts file. As I try to start the server, I encounter the following error: at Module.require (node:internal/modules/cjs/loader:100 ...

What is the best way to retrieve the value of a checked radio button in React.js?

I am in the process of creating a well-structured to-do list and I want to be able to add the input from any selected radio button into one of three options arrays (the array is not included in the code, but rather in a parent component). I am looking fo ...

What is a clear indication that a <div> is filled with text?

Picture a scenario where a website contains an element that needs to be filled with random text using JavaScript. Once the div is completely filled, it should reset and begin again. It may sound odd, but the question is: how will the JavaScript determine w ...

history.push() function is ineffective within a JavaScript file that does not contain a class

I've been delving into React and encountering an issue with the history.push("/dashboard") method, it's not functioning as expected. import axios from "axios"; import { GET_ERRORS, GET_PROJECT, GET_PROJECTS } from "./types"; export const createP ...

Mastering the art of incorporating if..then test flow in Cypress can elevate your testing

I need to create a test in Cypress that loads a page and checks if a modal opens within 5 seconds. If the modal opens, it should close it. If the modal does not open, the test should proceed to the specified testcase in the before block. How can I achiev ...

Enabling the acceptance of repeated values in the ui-select element

ui-select does not permit the insertion of duplicate values in a select list item. However, I have a scenario where a user needs to input a value multiple times that will not be selected from the dropdown list. Is there a way to accomplish this using the ...

What is the best method for determining the ID or class of a div element dynamically?

My issue involves a scrolling div that dynamically loads data using ajax and json from an API as you scroll horizontally. Currently, I have multiple scrolling divs on a single page. The problem arises when I need to inform jQuery about the ID of the div b ...

The typography text exceeds the boundaries of the Material-UI CardContent

In the React Material-UI framework, I am working with a CardContent component that looks like this: <CardContent className={classes.cardContent}> <Typography component="p" className={classes.title} variant="title"> {this.props.post.title ...

Utilizing Ajax in PHP to Upload Files

I'm encountering an issue while attempting to upload a file and send it via AJAX. The error message I am receiving is as follows: Notice: Undefined index: xlsFile in Here is the code snippet: HTML FORM : (this form is within a Modal Popup) <f ...

Utilize a pre-defined layout in a Vue component that is sent as a property

As a complete beginner, I kindly ask for your patience as I navigate through the coding basics. I am looking to utilize a template specified in the prop. The template is located within the DOM. My intention for approaching it this way is to reuse the comp ...

The issue of Nuxt i18n routing not functioning properly with sub pages

After modifying my app to integrate with nuxt i18n, I encountered an issue where the translations only work when accessing routes directly. For example, http://localhost:3000/fr/step/1 My app has a structured layout where each step is represented by a di ...

Detecting the failure of chrome.extension.sendRequest

Greetings Chrome Developers! I am wondering how one can determine when a chrome.extension.sendRequest call has not been successful. I attempted the following approach with no luck: chrome.extension.sendRequest({ /* message stuff here */ }, function(req){ ...

AdminLTE-3 Bootstrap-4 sidebar menu with dynamic AJAX functionality fails to toggle treeview open/hide after page is fully loaded

I am looking to update the sidebar menu dynamically in the adminlte 3 dashboard with bootstrap 4 using AJAX calls. However, I have run into an issue where the menu open/close functionality is not working when the data is loaded dynamically using AJAX. On t ...

Is it necessary for material-ui useStyles to use the entire props object?

Perusing through the documentation, it suggests that in order for our component to accommodate style overrides using classes, we are advised to provide the entire props object to the useStyles hook: function Nested(props) { const classes = useStyles(prop ...