即使值存在，localStorage.getItem() 也始终返回 null

Posted 2023-02-23

【中文标题】即使值存在，localStorage.getItem() 也始终返回 null

【英文标题】：localStorage.getItem() always returns null even when value exists

【发布时间】：2019-05-28 13:10:36

【问题描述】：

我不确定如果我做错了什么或者我在某处有错字，但我正在尝试比较 vue 项目中的日期，但我从本地存储中提取的值总是返回 null，即使我可以看到该值当我检查我的本地存储时，显然存在。所以这里是设置。

发出请求后，我在本地存储中设置过期日期，如下所示

retrieveToken( commit , credentials) 

      return new Promise((resolve, reject) => 
          axios.post('/login', 
              username: credentials.username,
              password: credentials.password,
          )
          .then(response => 
              const token = response.data.access_token
              const date = new Date(moment().add(30, 'seconds').toDate());
              localStorage.setItem('expires_on', date)
              localStorage.setItem('access_token', token)
              resolve(response)
          )
          .catch(error => 
              console.log(error.response.data)
              reject(error)
          )
      )
    ,

然后我可以看到 expires on 已放置在我的本地存储中

然后我想像这样使用 getter 来检索该值

tokenExpires() 
      return localStorage.getItem('expires_on')
    ,

所以我可以这样使用

computed: 
        ...mapGetters(['tokenExpires']),
    ,
methods: 
     destroySessionIfTokenIsExpired() 
            const current = new Date(moment())
            const expires = this.tokenExpires
            const currentDate = moment(current).format('YYYYMMDDHHMMSS')
            const expiresDate = moment(expires).format('YYYYMMDDHHMMSS')
                console.log(this.tokenExpires)
                console.log(expiresDate)
            if(currentDate >= expiresDate) 
                this.$store.dispatch('destroyToken')
                .then(() => 
                    this.$router.push('/login')
                    alert('Your Session Has Expired, Please Log Back In')
                )
             else return;
        
       

但是当我运行这个方法和 console.log(this.tokenExpires) 它返回 null 我不知道为什么。如果有人能看出我做错了什么，请告诉我！！

*更新，我的问题是我正在尝试观察路线并比较时间戳以查看会话是否仍然有效，但正如所指出的，getter 没有足够的时间来计算之前的值该方法运行，所以任何关于我如何解决这个问题的建议都会很棒。这是路线监视方法

watch: 
        '$route': function(to, from) 
            this.destroySessionIfTokenIsExpired()
        
    ,

【问题讨论】：

什么时候打电话给retrieveToken？在计算tokenExpires 属性时，expires_on 可能还不可用，因为retrieveToken 尚未从服务器返回结果。另外，localStorage 不是响应式的，所以不会触发 Vue 的重新计算。

@YongQuan，我明白你在说什么。有没有另一种方法可以在不使用 getter 的情况下从 localStorage 中提取值？如果我刷新页面，它会给它足够的时间来获取tokenExpires，但我也在关注路线，这是我遇到问题的地方。我将发布我的路线监视方法

为什么不在destroySessionIfTokenIsExpired 函数中使用简单的const expires = localStorage.getItem('expires_on')？

@YongQuan 我试试看

也许this可以给你另一个视角。

【参考方案1】：

感谢@YongQuan 我有这个解决方案。

methods: 
        ...mapActions(['destroyToken']),
        destroySessionIfTokenIsExpired() 
            const expiresOn = localStorage.getItem('expires_on')
            const expiresDate = moment(expiresOn).format('YYYYMMDDHHMMSS')
            if(expiresOn == null) return;
            const current = new Date(moment())
            const currentDate = moment(current).format('YYYYMMDDHHMMSS')
            if(currentDate >= expiresDate) 
                this.$store.dispatch('destroyToken')
                this.$router.push('/login')
             else return;
        
    ,
    watch: 
        '$route': function(to, from) 
            this.destroySessionIfTokenIsExpired()
        
    ,

我没有使用getter，而是将`localStorage.getItem('expires_on') 设置为方法内的一个变量。谢谢@永泉