vue.js 第二次刷新时localStorage具有空值

oalqel3c 于 2022-11-17 发布在 Vue.js

关注(0)|答案(3)|浏览(196)

请不要将其标记为重复，因为我已经检查了匹配问题，但问题是不同的。我正在使用Vue，在它里面，我在某些条件下设置本地存储，我将在后面的代码中解释。当我刷新页面时，我在控制台中获得值，因为它应该工作，但如果我第二次刷新，它将显示空
我的职能

data:{
age:'',

},
methods:{
getAge:function()
{

axios.get('/getage').then((res)=>{
this.age = res.data;

if(localStorage.getItem('age')===null)
{
localStorage.setItem('age',this.age)
}

})

},
mounted(){
console.log(localStorage.getItem('age'));
}

因此，当我第一次获得年龄并刷新页面时，我在控制台中成功获得年龄，但如果我再次刷新页面而不调用getAge函数，它将显示null。
在你说函数没有被调用之前，它显示为空，我想补充一点，它是本地存储，所以如果一旦设置了某个值，它必须拥有它，除非或直到删除

vue.js

来源：https://stackoverflow.com/questions/68099478/localstorage-having-null-value-on-second-refresh

3条答案

按热度按时间

jljoyd4f1#

您可以尝试以下操作：

data:{
  age:'',
},
methods:{
getAge:function() {
  axios.get('/getage').then((res)=>{
    this.age = res.data;
    if(localStorage.getItem('age')===null) {
      localStorage.setItem('age',this.age)
    }
  })
 }
},
mounted(){
  console.log(localStorage.getItem('age'));
}

挂载的属性似乎在方法属性内。您需要关闭}方法属性

赞(0）回复(0）举报 2022-11-17

bkhjykvo2#

没有足够的帖子来回答这个问题。它只开放猜测...如果你提供更多的信息，我可以调整我的答案。
这里的一个问题是getAge在这个段中根本没有被调用。所以mounted是第一个被调用的对象，它获取的是localStorage中已经存在的内容。根据所提供的有限信息，我认为最可能的原因是端点返回了null。所以在第一次刷新时，您看到的值就是localStorage中已经存在的值。然后localStorage被更新为null。然后当您刷新时，您将打印以前存储在localStorage中的null值。但老实说，这只是一个大胆的猜测，因为这里没有足够的信息来调试这个问题，而且我能想到至少三个其他的潜在原因。
了解如何自己解决这些问题是很重要的。大多数浏览器都有一个开发者工具窗口，你可以弹出。在Chrome中，你可以通过按F12键来实现这一点。转到应用程序选项卡，你可以看到localStorage中的内容。你可以将每一步都打印到控制台，以查看代码在哪里执行。您可以在代码中添加debug语句作为断点，并查看发生了什么。您可以使用dev工具检查网络流量，以查看端点传回了什么。如果localStorage对您来说确实不稳定，您应该能够在一个非常简单的情况下重现这种情况。如果可以，那么很可能是扩展的问题。如果你不能，那可能是你的代码或者polyfill（或者你的应用程序的其他部分或者它的依赖项）的问题。这是100%的问题，你应该在发布到SO之前缩小范围。