前端取值带引号问题及解决——localStorage.getItem

项目场景：

提示：现在行业大多数是前后端分离项目，这就不得不涉及后端返回数据，前端需要存取的问题：

例如：登录功能在登录成功后，后端会返回一个token有的还有用户信息，在下次发送请求的时候把token带上，用于判断用户是否登录。

---

问题描述

提示：那么这时候就设计前端存取数据的情况，可以通过session、localStorage、cookic存取，这里主要讲讲：localStorage存取的问题

---

原因分析：

提示：在JavaScript中，localStorage.getItem()方法返回的是字符串类型的值。如果存储的值本身就是字符串类型，那么在使用localStorage.getItem()方法获取该值时，会自动添加双引号。

例如：如果你存储了一个字符串"hello"，使用localStorage.getItem()方法获取该值时，会返回"hello"，而不是hello。如果你存储的值本身就是JavaScript对象，那么在使用localStorage.getItem()方法获取该值时，返回的是对象类型的值，不会添加双引号。

---

解决方案：

提示：如果你需要使用该值进行其他操作，需要去掉双引号，可以使用JSON.parse()方法将字符串类型的值转换为JavaScript对象，然后再进行操作

const value = localStorage.getItem('key');
const obj = JSON.parse(value);
console.log(obj); // 输出对象类型的值

提示：如果你存储的值本身就是JavaScript对象，那么在使用localStorage.getItem()方法获取该值时，返回的是对象类型的值，不会添加双引号

const obj = { name: 'John', age: 25 };
localStorage.setItem('key', JSON.stringify(obj));
const value = localStorage.getItem('key');
console.log(value); // 输出对象类型的值

需要注意的是，如果存储的值不是合法的JSON字符串，使用JSON.parse()方法会抛出异常。因此，在使用该方法之前，需要确保存储的值是合法的JSON字符串。