Web Storage避坑：localStorage.getItem常见错误与正确用法！

嗨，各位玩家好，我是 King。
今天咱们聊一个前端日常经常用到的东西——localStorage.getItem。这玩意儿看起来简单，但不少朋友在里面踩过坑。今天我就用大白话，把常见的坑和正确做法给你掰扯清楚，保证你读完能少走弯路。
一、先说清楚：localStorage 是干什么的？   www.kfzhan.com/kfxx/328.html   www.kfzhan.com/kfxx/329.html  www.kfzhan.com/kfxx/330.html  
你可以把它当成浏览器给每个网站分配的一个“小抽屉”。你往里面存点数据，就算关了浏览器再打开，数据还在。getItem 就是从这个抽屉里拿东西的方法。
二、五个常见坑，看看你中过几个
坑1：拿不到数据时，返回的是 null，不是 undefined
很多新手以为取一个不存在的 key 会返回 undefined，结果用 === undefined 去判断，发现死活不对。

let value = localStorage.getItem('notExist');
console.log(value); // null

正确判断方式：

if (value === null) {
  // 没有这个数据
}

坑2：存对象进去，取出来是 “[object Object]”  www.kfzhan.com/kfxx/331.html  www.kfzhan.com/kfxx/332.html  www.kkkmir.com/hjcq/348.html  
这是高频翻车现场。localStorage 只能存字符串。你直接存一个对象，它自动调用了 toString。

let user = { name: 'King', level: 5 };
localStorage.setItem('user', user);
let result = localStorage.getItem('user');
console.log(result); // "[object Object]" —— 废了

正确做法：

// 存的时候转成 JSON 字符串
localStorage.setItem('user', JSON.stringify(user));

// 取的时候解析回来
let stored = localStorage.getItem('user');
let userObj = stored ? JSON.parse(stored) : null;

坑3：忘了 try…catch，导致脚本直接崩掉
getItem 在某些极端情况下会抛出异常：   www.sofuba.com/fgcq/348.html  www.haomir.com.cn/gblbb/348.html  www.644game.com.cn/yxgl/350.html  
存储已满（不同浏览器限制不同，一般 5-10MB）
用户开启了无痕模式且浏览器禁用了存储
隐私模式下部分浏览器直接抛错
不要这样写：

let data = localStorage.getItem('key'); // 万一抛错，后续代码全停

推荐写法： www.887game.com.cn/zfzn/352.html  www.08game.com.cn/yxgl/357.html   www.34game.com.cn/yxgl/366.html  

let data = null;
try {
  data = localStorage.getItem('key');
} catch (error) {
  console.warn('读取存储失败', error);
  data = null; // 兜底
}

坑4：不注意数据类型转换
你存的是数字 123，取出来的是字符串 "123"。如果直接做加法运算，结果可能让你懵。

localStorage.setItem('score', 456);
let score = localStorage.getItem('score'); // "456"
console.log(score + 10); // "45610"，不是 466

解决： www.48game.com.cn/hlcq/354.html  www.7sfwang.cn/dzycq/308.html  www.35game.com.cn/xkcq/314.html  

let score = Number(localStorage.getItem('score')) || 0;

坑5：key 名用了动态变量，导致取错或覆盖
多人协作或模块化开发时，key 名写得不规范，很容易冲突。

let pageId = 1;
localStorage.setItem(`user_${pageId}`, 'King');
// 取的时候写漏了下划线或变量
let wrong = localStorage.getItem('user1'); // 拿不到

建议： 用常量统一管理 key 名，加固定前缀。

const STORAGE_KEYS = {
  USER_INFO: 'app_user_info',
  SCORE: 'app_score_v1'
};

三、最佳实践：稳一点，不出错
1. 封装一个安全读取函数
把上面说的坑一次性兜住：

function safeGetItem(key, defaultValue = null) {
  try {
    let value = localStorage.getItem(key);
    if (value === null) return defaultValue;
    return value;
  } catch {
    return defaultValue;
  }
}

function safeGetJSON(key, defaultValue = null) {
  try {
    let value = localStorage.getItem(key);
    if (value === null) return defaultValue;
    return JSON.parse(value);
  } catch {
    return defaultValue;
  }
}

2. 存数据前检查可用性   www.38game.com.cn/yxjq/312.html   
写一个检测函数，避免在不支持或无痕模式下出错：

function isStorageAvailable() {
  try {
    const testKey = '__test__';
    localStorage.setItem(testKey, '1');
    localStorage.removeItem(testKey);
    return true;
  } catch {
    return false;
  }
}

3. 用完记得清理，别占着不释放
虽然 localStorage 是持久化的，但长期不用的旧数据建议主动移除：

// 删除单项
localStorage.removeItem('oldKey');

// 清空当前域名下全部（谨慎）
// localStorage.clear();

4. 敏感信息别往里放
localStorage 里的数据是明文的，任何当前页面能跑的脚本都能读到。不要存令牌、身份凭证、个人隐私等敏感内容。
四、总结一句话
localStorage.getItem 本身很简单，但坑都在细节里：记得处理 null、记得 JSON 序列化、记得 try 包裹、记得类型转换、记得规范命名。把这五个点记住了，你基本不会再在这上面栽跟头。
希望这篇大白话能帮你快速上手。下回咱们聊聊 sessionStorage 和 localStorage 的区别，以及什么时候该用哪一个。
大家如果踩过其他坑，也欢迎评论区交流。我是 King，咱们下篇见。
本文首发于博客园，欢迎收藏、转发。转载需保留出处。

更多分享内容链接：

关网页也不丢数据！sendBeacon埋点可靠方案！ - 九世師 - 博客园

字符串数字互转，别再只会用 atoi 了！ - 九世師 - 博客园

JS异步四兄弟成长记：9个关键升级让你少写回调！ - 九世師 - 博客园

异步编程完全指南：从 Promise 到 await 与 Async 迭代器的 8 个演进知识点。 - 九世師 - 博客园