ローカルストレージとセッションストレージとは

前提：ユーザーデータを保存するには

そもそもJavascriptは、スクリプトを用いてクライアントのコンピューターファイルに勝手に書き込むことはできません。
なぜかというと、クライアントのセキュリティを守るために必要だからです。
悪意のあるスクリプトが埋め込まれているサイトにアクセスしたことで、クライアントの重要なファイルを削除したりできたら一大事です。

では、どのようにしてユーザーデータを保存すればよいのか。
そこで登場したのがcookieという仕組みでした。

ただcookieは、JSからは操作がしにくく、サイズの制限もあります。
そこで、近年は代替手段としてWebStorage（いわゆるストレージ）があります。

cookieとWeb storageの違いは、こちらの記事がとてもわかりやすいです。

ストレージとは

ブラウザ内部のデータストア（つまり保管庫）です。
key - valueの組み合わせでデータが保管されています。

セッションストレージとは

ブラウザが開いている間だけデータを管理する。
ブラウザを閉じたタイミングでデータは破棄される。（ウィンドウ / タブ間でデータを共有することもない）

ローカルストレージとは

オリジン単位でデータを管理する。
「明示的に破棄をする or ブラウザを閉じる」をするまでデータを維持している。（ウィンドウ / タブ間でデータを共有することが可能）

オリジンとドメインの違いなどについては、こちらの記事がとてもわかりやすいです。

ちなみに、CORSについて簡単に説明をすると、
あるドメインで動いているwebアプリケーションに対して、別のドメインで動いているwebアプリケーションにアクセスするためのセキュリティを緩和する機能です。
デフォルトでは、ブラウザは異なるオリジンへのリクエストを制限している。

ただ「CORSをサーバー側で設定していなければ、別オリジンへのアクセスを緩和できない」というわけではなく、サーバー側でJSの代理として別オリジンにアクセスするという仕組みもある。
これが、プロキシと呼ばれているオリジンまたぎの手段です。

データの保存・取得・削除

セッションにデータを保存・取得・削除する方法の一例として以下があります。
ローカルストレージの場合は、セッションデータの削除を行わなければデータが維持され続けてしまい、意図しないバグやメモリのひっ迫に繋がります。

// もしくは、sessionStorage
let storage = localStorage

// データを保存
storage.setItem('SNS', 'LINE');
// データを取得
// 結果：SNS
console.log(storage.getItem('SNS'))

// データの削除
storage.removeItem('SNS')