TypeScript新手：如何在TypeScript/JavaScript中提取localStorage用户名？

嘿，刚接触TypeScript/JavaScript的话，这个需求其实很容易搞定，咱们一步步来拆解：

首先，你提到localStorage.getItem('currentUser')返回的是带空格键的JSON字符串：

{" username ":"root"," password ":"root"}

这里要注意两个关键点：一是返回的是JSON字符串，不是直接可用的对象；二是用户名的键是带前后空格的" username "，不是常规的"username"，这一点很容易踩坑！

基础实现步骤 #

1. 先从localStorage获取目标字符串
2. 将JSON字符串解析为JS/TS对象
3. 通过带空格的键名提取用户名

代码示例（TypeScript版本）：

// 1. 获取localStorage中的值
const currentUserStr = localStorage.getItem('currentUser');

if (currentUserStr) {
  // 2. 解析JSON字符串为对象
  const currentUser = JSON.parse(currentUserStr);
  // 3. 提取用户名（注意键名带前后空格）
  const username = currentUser[' username '];
  console.log(username); // 输出: root
} else {
  console.log('当前没有存储用户信息');
}

JavaScript版本几乎一样，只是不需要类型声明：

const currentUserStr = localStorage.getItem('currentUser');

if (currentUserStr) {
  const currentUser = JSON.parse(currentUserStr);
  const username = currentUser[' username '];
  console.log(username);
} else {
  console.log('当前没有存储用户信息');
}

更健壮的实现（处理异常） #

实际开发中，可能会遇到JSON格式错误、键名不存在的情况，所以可以加上异常捕获和默认值处理：

let username = '';
const currentUserStr = localStorage.getItem('currentUser');

try {
  if (currentUserStr) {
    const currentUser = JSON.parse(currentUserStr);
    // 可选：也可以先清理键名的空格，比如用Object.keys处理
    // const cleanedUser = Object.fromEntries(Object.entries(currentUser).map(([k, v]) => [k.trim(), v]));
    // username = cleanedUser.username || '';
    username = currentUser[' username '] || '';
  }
} catch (error) {
  console.error('解析用户信息失败:', error);
}

console.log('提取到的用户名:', username);

小提示 #

如果之后能控制存储的JSON格式，建议把键名的空格去掉（改成"username"），这样就可以直接用.语法访问：currentUser.username，更直观也不容易出错～

内容的提问来源于stack exchange，提问作者M1rwen