为什么要使用JSON.stringify()和JSON.parse

文章目录

• 前言
• 一、为什么要使用JSON.stringify()
• 二、JSON.stringify()是否使用情况对比
• 三、使用JSON.parse()进行解析数据
• 最后

---

前言

项目中经常会看到JSON.stringify()和JSON.parse()的使用，但是为什么会使用到它们？如何使用它们，本文将和你分享它们。

---

一、为什么要使用JSON.stringify()

JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串，数据在传输的过程中只能传输字符串。如果直接传输数据就会变成 [[Prototype]]: Object 无法使用了

二、JSON.stringify()是否使用情况对比

未使用时：

let abc = res.data.data.pages; //res是后端接口返回的数据,因为想要更好的说明情况在此处做了省略处理
console.log('后端返回的数据_abc:', abc);
sessionStorage.setItem('abc', abc);
sessionStorage.getItem('abc');
console.log('无JSON.stringify()_abc:', sessionStorage.getItem('abc'));

使用JSON.stringify()后：

let abc = res.data.data.pages; //res是后端接口返回的数据,因为想要更好的说明情况在此处做了省略处理
let def = JSON.stringify(res.data.data.pages);
console.log('后端返回的数据_abc:', abc);
sessionStorage.setItem('def', def);
sessionStorage.getItem('def');
console.log('有JSON.stringify()_def:', sessionStorage.getItem('def'));

这时候返回后的值就不会是[[Prototype]]: Object 了，而是会有数据，但是和我们最初从后台获取的值还是会有不同，这时候就要用上JSON.parse() 了。

三、使用JSON.parse()进行解析数据

let abc = res.data.data.pages; //res是后端接口返回的数据,因为想要更好的说明情况在此处做了省略处理
let def = JSON.stringify(res.data.data.pages);
console.log('后端返回的数据_abc:', abc);
sessionStorage.setItem('def', def);
sessionStorage.getItem('def');
//console.log('有JSON.stringify()_def:', sessionStorage.getItem('def'));
console.log('解析后的JSON.stringify()_def:', JSON.parse(sessionStorage.getItem('def')));

此时的数据就和后端返回的数据是一样的了，这样就可以在其它的组件页面中进行使用了

最后

如果分享对你有帮助记得点赞鼓励下哈！！！