[JavaScript] localStorage JSON 保存・取得

JSONデータをLocalStorageへ保存する方法で溢れていて、
変換して正常に取得する情報がなかなかGoogleヒットしなかったのでメモ程度に記事にします。

JSONの用意

①JSONファイルを作成して、データとなる情報を記述。

※JSONは、少しの記述ミスで正常に動作しないので慎重に。
JSONデータの作成方法は別途検索して下さい。

data.json

[{
  "userId": "owner10",
  "email": "[e-mail]",
  "password": "12345678",
  "unisex": "男",
  "age": "24",
  "from": "日本"
}]

私は、Angular構成ですので下記PATHへJSONファイルをセットしました
→src/assets/data/user.json

JSONデータを読み込み

①JSONデータをlocalStorageへ設定するため、tsファイル(jsファイル)へimport。
②tsファイル(jsファイル)でlocalStorageへ保存するコード記述。

※実際は、JSONファイル呼び出しファイルとlocalStorage保存ファイルは分けて実装していますが、合わせた形で記述します。
※関係ない箇所はコメントアウトまた最初から削除して↓記載しています。

login.component.ts

import UserJson from '../../assets/data/user.json'; //user.jsonファイル読み込み

export class LoginComponent implements OnInit, OnDestroy {

  localstorageName(){ //userIdをローカルストレージへ保持
    this.storageUserId = this.loginForm.value.userId;
    localStorage.setItem("userId",this.storageUserId);//form入力値
    
    //暫定ローカルストレージ登録情報 (DB接続していないため暫定。後で削除)
    let json = JSON.stringify(UserJson);
    localStorage.setItem('profile',json); //第一引数：key名, 第二引数:value値
  }

上記に結果、localStorageへ下記の情報が保存されます。
key : profile
value : [{"userId": "owner10","email": "[e-mail]","password": "12345678","unisex": "男","age": "24","from": "日本"}]

★JSONオブジェクトlocalStorage取得方法

home.ts

export class homeComponent implements OnInit {

  //html部品表示(名前、年齢、出身、性別)
  p_name:any;
  p_age:any;
  p_from:any;
  p_unisex:any;


  constructor(
    private router: Router
  ) {
   }
  ngOnInit(): void {
    //profile部品表示値を(暫定)ローカルストレージから出力
    var localStorageJson = localStorage.getItem('profile');
    var localStorageJsondata = JSON.parse(localStorageJson!);

    //html部品表示(名前、年齢、出身、性別)
    this.p_name = localStorageJsondata[0].userId; //owner10取得。
    this.p_age = localStorageJsondata[0].age; //24取得
    this.p_from = localStorageJsondata[0].from; //日本取得
    this.p_unisex = localStorageJsondata[0].unisex; //男取得
  }

上記の通りに、localStorageからJSONオブジェクトデータを取得しました。
これをhtml上に紐づけて表示させると画面表示されます。

Angular構成の場合

home.html

<div class="profile_box">
    <div class="box-title">プロフィール</div>
    <div class="profile_center">
    <img alt="" src="../../assets/image/icon_profile_sample.jpeg" class="profile_figure">
    <div class="profile_name">{{p_name}}</div></div>
    <p>自己紹介文</p>
    <ul>
    <li>性別：{{p_unisex}}</li>
    <li>出身地：{{p_from}}</li>
    <li>年齢：{{p_age}}</li>
    </ul>
</div>

参考例：
下記画像のように、localStorage保存した情報を取得したデータをhtml表示させることができました。

補足

配列、JSONの扱いは難しいです。 しっかりと書き込み・取得方法を時間設けて学ぶのが良いです。

実務でも、必要な知識です。