JavaScript関連でJSONとStorageの基本についてのまとめています。
こいつらを使いこなせるとアプリ開発などの幅が広がることは間違いないです！
#JSON
jsonはデータ交換フォーマットです。
異なる言語間でもデータをやりとりできるのがjsonです。
JavaScript→Rails→JavaScriptなどのようにデータを送るときにはjsonを使います。
JSONは{}の中にキーと値をコロンで区切って記述します。キーは必ずダブルクォーテーションで囲む必要があります。(シングルクォーテーションだとエラーになる）
{ "a": 0, "b": 1, "c": 2}
JavaScriptでは、オブジェクトをJSON形式に変換したりその逆を行ったりすることが簡単にできます。
これにはstringifyとparseを使います。
const obj = {a: 0, b: 1, c: 2};
const json = JSON.stringify(obj);
console.log(json);
//{"a":0, "b":1,"c":2} ←json
const obj2 = JSON.parse(json);
console.log(obj2);
//{a: 0, b: 1, c: 2} ←object
JSON.stringify(obj)という記述でjson形式に変換しています。
ちなみにjsonに変換するときに特定のプロパティだけを指定することもできます。
const obj = {a: 0, b: 1, c: 2};
const json = JSON.stringify(obj, ["a", "c"])
//{"a":0,"c":2}
JSON.stringify(abj, ["a", "c"])としています。
これで指定したプロパティのみをjson形式にすることができます。
#Storage
Storageは、ブラウザの特定領域にデータを格納するためのオブジェクトです。
JavaScriptでは、実際にはlocalStorageを使ってブラウザにデータを格納することができます。
localStorage.setItem('key', 1);
const storageData = localStorage.getItem('key');
console.log(storageData);
//1
localStorage.setItem('key', 1);という記述でブラウザにデータを格納できています。
検証ツールのApplicationのLocal Storageで確認できます。
この値を取得したいときは、localStorage.getItem('key')のようにしてあげれば取得できます。
もちろんjson形式でデータを格納することもできます。
const obj = {a: 0, b: 1};
const json = JSON.stringify(obj);
localStorage.setItem('key', json);
const storageData = localStorage.getItem('key');
console.log(storageData);
//{"a":0,"b":1}
#まとめ
JSONとStorageについて見てきました。
かなり実践的に活躍してくれる奴らだと思います。
手を動かしていじってみてください。
今回は以上です！