LocalStorage 缓存用户数据后页面刷新就失效了？

书生シ巧丽提问于 2026-03-14 14:51:16 阅读 12

优化

我在做一个简单的用户登录状态保持功能，把 token 存到 LocalStorage 里，但每次刷新页面后读取不到，或者读出来是 null。明明之前 setItem 成功了，控制台也没报错，是不是我读写方式有问题？

下面是我存和取的代码：

localStorage.setItem('authToken', response.token);

// 页面加载时尝试读取
const token = localStorage.getItem('authToken');
console.log(token); // 有时候是 null，有时候又能拿到

缓存优化

我来解答赞 1 收藏

反馈

1 条解答

司空美丽 Lv1

这个问题挺典型的，我猜大概率是代码执行顺序或者异步的问题。

先检查一下你 setItem 的时候 response.token 是不是真的有值，很多情况下 token 还没拿到就跑去存了，或者 response 本身就有问题。

你可以这样排查：

// 存的时候先确认有值

if (response.token) {

  localStorage.setItem('authToken', response.token);

  console.log('存储成功:', response.token);

} else {

  console.log('token 为空，存个屁');

}



// 读取的时候也要判断

const token = localStorage.getItem('authToken');

if (token) {

  console.log('读取到的 token:', token);

} else {

  console.log('读取不到，看看是不是存的时候就有问题');

}

还有个常见坑：如果你的页面有任何重定向或者刷新时带上了某些参数清空了 storage，也会出现这种情况。

另外推荐你用 try-catch 包裹一下，防止某些浏览器隐私模式或者禁用 cookies 的情况下 localStorage 直接报错：

function setToken(token) {

  try {

    localStorage.setItem('authToken', token);

  } catch (e) {

    console.error('存储失败:', e);

  }

}



function getToken() {

  try {

    return localStorage.getItem('authToken');

  } catch (e) {

    console.error('读取失败:', e);

    return null;

  }

}

你先把上面的日志打出来看看，存的时候 token 到底是不是 undefined。

2026-03-14 15:00