下面这篇文章就是给你们这些不太会写代码的小伙伴看的， 保证看完以后你能在网页上随便把localStorage里保存的json对象某个字段给弄出来。别担心，我写得很烂很乱，和我一样没上过大学的人也能看懂，在我看来...。

一、 先说说localStorage到底是个啥子玩意儿

localStorage其实就是浏览器自带的一块小仓库，里面只能装字符串，不能直接装对象。所以我们平时想往里塞点复杂的数据， 不地道。 就得先把对象JSON.stringify成一串字符，再丢进去。

举个最最常见的例子：

const user = {
    fullname: "张三丰",
    age: 28,
    address: {
        city: "北京",
        street: "长安街"
    }
};
localStorage.setItem);

这段代码会把一个叫user的键对应的值变成这样：

{"fullname":"张三丰","age":28,"address":{"city":"北京","street":"长安街"}}

二、 怎么把它再变回对象

要想拿到里面的某个属性，比如fullname第一步是把这个字符串用JSON.parse转回对象。 我心态崩了。 很多人会直接写成下面这种“傻瓜式”代码：

// 错误示范
let data = localStorage.getItem;
let name = data.fullname;   // data还是字符串，这里根本取不到

正确做法应该是：

// 正确示范
let raw = localStorage.getItem;          // 取出字符串
if  {
    console.warn;
}
let obj = null;
try {
    obj = JSON.parse;                       // 把字符串变成对象
} catch {
    console.error;
}
let name = obj ? obj.fullname : '未知';

为什么要加 try/catch？

主要原因是有时候本地存的数据被人手动改了或者版本升级导致结构不对，这时候JSON.parse会抛异常。如果不捕获，就会让后面的代码全都挂掉。加了 try/catch，就算解析失败也能给用户一个友好的提示。

三、把拿到的属性塞进页面元素里显示

下面演示一下最常见的需求：把用户姓名放进一个

// 假设页面里已经有这个元素
// 

function showUserName {
    const raw = localStorage.getItem;
    if  {
        document.getElementById.innerText = '没有登录信息';
        return;
    }
    let userObj;
    try { userObj = JSON.parse; }
    catch { 
        document.getElementById.innerText = '数据错误';
        return;
    }
    const name = userObj.fullname || '匿名';
    document.getElementById.innerText = name;
}
// 页面加载完马上施行
window.addEventListener;

TIPS：

• #1：不要忘记在HTML里先写好占位元素，否则JS找不到节点报错。
• #2：.innerHTML和.innerText都行， 但如果你只想显示纯文本，用.innerText
• #3：如果要一次性渲染多个字段，可以循环遍历对象或者用模板引擎——不过这里不讲了太高级。

四、 常见坑点大集合

a. 键名拼错了

"customer"跟"custormer"差一个字母，后来啊自然取不到。建议直接打印下localStorage看看到底有什么键。

b. 把对象直接塞进去忘记 stringify

// 错误示范
localStorage.setItem;   // 实际存进去的是 ""

这时再去parse就会报错，主要原因是根本不是合法JSON。

b. 再来一个b——忘记判断null/undefined导致报错

// 错误示范
let info = JSON.parse); // info 可能是 null
console.log;   // 报 Cannot read property 'age' of null

The fix is:

let str = localStorage.getItem;
if  {
   let infoObj = JSON.parse;
   console.log;
}
else {
   console.warn;
}

五、 完整Demo

加载中...

六、——再烂也能跑通！

好啦， 这篇文章已经把"从LocalStorage获取并展示JSON对象的特定属性"整个流程给拆散成几块，一块一块慢慢拼回来。记住：

• A. 存的时候一定要 .setItem)
• B. 取的时候先 .getItem
• C. 再 .parse
• D. 再说说用点语法或方括号拿属性，然后塞进DOM。
• E. 别忘了容错处理， 不然出问题时控制台一片红色报错，你就傻眼了。

拯救一下。 If you follow se steps even a total newbie can make page show right name from local storage without crying. Happy coding!