如何每天仅显示一次弹出窗口

时间:2019-11-25 18:14:09

标签: javascript typescript vue.js

我有一种方法可以在用户登录到网站4秒后显示一个模式窗口。如果关闭,则在接下来的24小时内再次显示。我有一些问题。 LocalStorage不存储我的数据,也不返回存储日期的变量,我该如何解决?

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

1 个答案:

答案 0 :(得分:1)

在您的setDevHoursModal方法中,您并不总是返回一个值。您可以通过返回条件的结果来解决此问题:

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