【JavaScript】SessionStorageとは？

SessionStorageとは

SessionStorageは、データをセッション中保存できる仕組みのこと。

同一オリジンで、ブラウザ(タブ)が閉じられるまでは、データ保存が維持されます。
(ページの再読み込み(リロード)でも、データは消えない。)

※同一オリジンとは、
・http://www.abc.jp
・http://www.abc.jp/content
・http://www.abc.jp/login
上記は同一オリジンです。
・http://www.abc.jp
・https://www.abc.jp/content
・http://www.abd.jp/login
上記は同一オリジンではありません。

また、実装で好きなタイミングでSessionStorageを削除することができます。

実装を見る

概要：
フォーム画面を作成して、フォーム画面で入力したデータをtsファイルで取得します。
取得

a.ts

storageUserId = "";

sessionStorageName(){ //userIdをセッションストレージへ保持
    this.storageUserId = this.loginForm.value.userId;
    sessionStorage.setItem("userId",this.storageUserId);//form入力値
}

a.html

<form class="login-form" [formGroup]="loginForm" (ngSubmit)="onSubmit()" (ngSubmit)="sessionStorageName()">

  <input type="userId"  name="user_id" formControlName="userId" class="login-userId" autofocus="true" required="true" placeholder="UserId" />
  <input type="submit" name="button" value="Login" class="login-submit" id="login_submit" />
</form>

a.tsの、
「sessionStorage.setItem()」で、セッションストレージへデータ保存可能です。

画面跨ぎでデータを使いたい場合の手段として使う場合は、

b.ts

sessionStorage.getItem("userId");

とすれば、sessionStorageのuserId: owner1が取得できます。