初回アクセス時など初回限定の何かを制御したいとき
初回アクセス時など初回限定の何かを制御したいとき
初回だけの何かを実装したい
例えば、スプラッシュ画面（アクセス時やソフトの起動時にロゴが出たりするアレ）などを制御したいとき。
スプラッシュ画面はアニメーションなどを凝って作ればとても魅力的なサイトに見えます。
しかし、毎回アクセス時に出て来るとユーザーの離脱に繋がってきます。
（お～！すごい！とはなりますが…段々と…え…これ毎回出て来るの…？？となります。）
そのような時は出来れば1度きりのアニメーションなどにするなどを行うことで、ユーザーの離脱を減らすことが出来るのではないでしょうか？
制御する方法がとしては様々な方法がありますが、JavaScriptだけで簡単に制御したい…
そんなときはセッションストレージ(sessionStorage)やローカルストレージ(localStorage)を利用すると便利です。
sessionStorage / localStorageとは?
セッションストレージとは WebStorageAPI で、windowオブジェクトのプロパティです。
またローカルストレージも同じです。
簡単に言うとブラウザに値を保存させることが出来る機能だと思ってもらっても良いかもしれません。
それぞれには違いがあります。
sessionStorage
有効期限があります。
タブやブラウザを閉じると消えます。
localStorage
有効期限がありません。
つまり、タブやブラウザを閉じても削除されませんし、PCを再起動や終了させても消えません。
また、同一URLからのアクセスも値を保持します（別タブなどで開いていても値が共有されます）
それぞれの記述方法
使い方は難しくはないです。
ストレージに保存する場合
セッションストレージに値を保存をさせる方法は setItem メソッドを利用して行います。
第一引数にキーとなる文字列、そして第二引数に値を保存させます。
sessionStorage.setItem('key', value);
// ローカルストレージの場合
localStorage.setItem('key', value);
上記の key や value は任意の文字列などに変更してください。
ストレージから取得する場合
取得はもっと簡単で getItem メソッドを利用します。
引数はキーのみで取得が可能です。
sessionStorage.getItem('key');
// ローカルストレージの場合
localStorage.getItem('key');
ストレージから削除する場合
削除は removeItem メソッドを利用します。
こちらも引数はキーのみで削除可能です。
sessionStorage.removeItem('key');
// ローカルストレージの場合
localStorage.removeItem('key');
使用例）セッションストレージの値を元に初回アクセス判定をする
使用例として初回アクセス判定をセッションストレージで行います。
// セッションストレージの値があるかどうか判定 （キー： accessed )
if(!sessionStorage.getItem('accessed')) {
// 無い場合はセッションストレージに値を保存させる（保存する値は true）
sessionStorage.setItem('accessed', true);
// 初回アクセス時にだけ実行したい処理があれば、ここに処理を追加する
}
たったこれだけです。
セッションストレージだと、タブを閉じたりブラウザを閉じると消えるので…
よくアクセスしてもらう場合（例えばECサイトやブログサイトなど）はローカルストレージを使ったほうが良いかもしれません。
ローカルストレージに変更する場合はサンプルソースの sessionStorage 部分を localStorage に変更するだけでOKです。
使い道は様々
上記のように初回アクセス判定をするというのも使えます。
他には例えばアプリケーションやシステムなどにも利用することは出来るかと思います。
例えば、
- 毎回APIの値を取得するための固定値
- APIからのレスポンス
などを保存しておき、APIへのアクセスは減らすという方法もあります。
（React や Vue などは useState などそれぞれに応じたセッション管理方法があるので、それはそちらを使ったほうが良いと思います。）
ただ、レスポンスの中で重要な値は保存はしない方が良いでしょう。
また、ストレージから削除するタイミングなどを考えておくことも大切かなと思います。