初回アクセス時のみローディング画面を表示する（Cookie使用）

ローディング画面を初回アクセスのみ表示したいです。

下層ページからトップページに戻ったときには表示しないようにしたいです。

という条件があったとします。

方法としては

1. Cookieを使用する
2. ローカルストレージを使用する
3. セッションストレージを使用する

今回はCookieを使用した方法をご紹介します。

// Cookie 設定
function setCookie(key, value){
    document.cookie = key+'='+value+';';
}

//Cookie 取得
function getCookie(key){

    const cookies = document.cookie;
    const cookiesArray = cookies.split(';');

    for(let i = 0; i < cookiesArray.length; i++){
        let cookie = cookiesArray[i].split('=');
        if( cookie[0] === key){
            return cookie;
        }
    }
}

const keyName= 'sitevisited';
const keyValue= 'true';
const cookie = getCookie(keyName);

if(typeof cookie === 'undefined' || cookie[1] !== keyValue){
    setCookie(keyName, keyValue);
    // ローディングのアニメーションの処理

}

1. Cookieの値は文字列で入るので比較するときに注意すること
2. ローディングの要素は初期表示をdisplay:none;などで非表示にしておく。（ちらつき回避）