javascript - 如何让vue每天只显示一次弹出窗口

Question

我有一个方法，可以在用户登录网站 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)
      }
    }
  }

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