トップページにアクセスするとローディングアニメーションが表示されるサイトってありますが、トップページを開く度に再生されるとだいぶ鬱陶しいです。

そのため、初回アクセス時だけアニメーションを表示させ、2回目以降は省略するようにするのがおすすめです。

今回はsessionStorageを利用して2回目以降のアクセス時にはアニメーションを省略する方法のメモ。

//2回目以降のアクセスではローディングアニメーションを省略
jQuery(function($) {
	let webStorage = function () {
		if (sessionStorage.getItem('access')) {
			//2回目以降のアクセス（sessionStorageにデータがある場合）
			$('#body').addClass('onwards');
		} else {
			//初回アクセス（sessionStorageにデータを保存する）
			sessionStorage.setItem('access', 'true');
		}
	}
	webStorage();
});

sessionStorageはブラウザにデータを保存しておける仕組みです。

上記ソースコードでは初回アクセス時にsessionStorageにデータを保存し、データの有無で初回か否かを判別しています。

• sessionStorageにデータがない＝初回アクセス
• sessionStorageにデータがある＝2回目以降のアクセス

データの保存期間はブラウザを閉じるまでなので、ブラウザを一旦閉じて再度アクセスすれば、またローディングアニメーションが再生されます。