JSON.stringify() と JSON.parse() を使用する理由

---

序文

プロジェクトで JSON.stringify() と JSON.parse() が使用されているのをよく見かけますが、なぜ使用されるのでしょうか? それらの使用方法については、この記事で説明します。

---

1. JSON.stringify() を使用する理由

JSON.stringify() メソッドは、JavaScript オブジェクトまたは値を JSON 文字列に変換し、データ送信中に送信できるのは文字列のみです。データを直接転送すると[[プロトタイプ]]となりオブジェクトは使用できません

2. 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 ではなくデータを持ちますが、元々バックグラウンドから取得した値とは異なります。使い果たした。

3. 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')));

このときのデータはバックエンドから返されるデータと同じなので、他のコンポーネントページでも利用できます。

やっと

共有が役に立った場合は、「いいね！」を押して励ましてください。！！